js：页面加载时显示第一帧视频答案

【问题标题】：js: show first frame of video when the page loadsjs：页面加载时显示第一帧视频
【发布时间】：2021-02-05 12:07:06
【问题描述】：

我正在编辑一个带有 js 功能的 wordpress 主题组合，用于悬停播放/暂停视频。它几乎像我想要的那样工作——当我将鼠标悬停在它播放的视频上时，鼠标退出时它会停止并返回到第一帧。但是，当页面重新加载时，视频不会显示第一帧，而是显示视频的其他部分。我想在此代码中添加一些内容，以使第一帧在加载时显示。我还没有尝试过任何东西，因为我似乎没有正确的术语。这是我的功能：

$gallery.find( "video" ).each( function () {
        this.pause();
        let $this = $( this );
        $this.parents( ".item" ).find( "> a" ).on( "mouseenter", function () {

            $( this ).parents( ".item" ).find( "video" )[ 0 ].play();
        } ).on( "mouseleave", function () {
            $( this ).parents( ".item" ).find( "video" )[ 0 ].pause();
            $( this ).parents( ".item" ).find( "video" )[ 0 ].currentTime = 0;
        } );
    } );

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/7323053/…（也检查 2./3. 答案）
是的，这行得通。我将 this.currentTime= 0 添加到我的函数中。

标签： javascript

【解决方案1】：

这可能会有所帮助：

document.getElementById('THE VIDEO').addEventListener('loadedmetadata', function() {
    this.currentTime = 0;
}, false);

【讨论】：

【解决方案2】：

谢谢，这行得通。新代码供日后参考：

$gallery.find( "video" ).each( function () {
        this.currentTime = 0;
        this.pause();
        let $this = $( this );
        $this.parents( ".item" ).find( "> a" ).on( "mouseenter", function () {

            $( this ).parents( ".item" ).find( "video" )[ 0 ].play();
        } ).on( "mouseleave", function () {
            $( this ).parents( ".item" ).find( "video" )[ 0 ].pause();
            $( this ).parents( ".item" ).find( "video" )[ 0 ].currentTime = 0;
        } );
   } );

【讨论】：