页面加载时显示video海报图而非视频初始帧的问题求助

修复方案 #

根因

页面首次加载时，浏览器默认会预加载视频的部分内容/元数据，优先渲染视频首帧，覆盖你设置的poster海报。

方案1（推荐）：修改video标签属性

给<video>标签添加preload="none"属性，告知浏览器页面加载时不要预加载视频内容，默认就会显示poster设置的海报，鼠标移入播放时才会触发视频加载，不影响原有交互逻辑。
修改后的HTML代码如下：

<video poster="myimage.png" src="myvideo.mp4" class="myvideo" controls="" loop="" 
 width="auto" height="300" preload="none"></video>

方案2：修改JS逻辑（适合需要预加载视频的场景）

如果希望提前预加载视频，避免首次移入播放时加载卡顿，可以在页面加载完成后主动调用一次load()方法，强制重置到海报展示状态，修改后的JS代码如下：

$(document).ready(function() {
  // 页面加载完成后主动触发一次load，显示海报
  $(".myvideo").get(0).load();
  $(".myvideo").on("mouseover", function(event) {
    $(this).get(0).play();
  }).on('mouseout', function(event) {
    this.load();
  });
})

两个方案任选其一即可，原有鼠标移入播放、移出恢复海报的逻辑无需调整。

提示：你提供的代码末尾那段时间日志输出逻辑和视频功能无关，不需要可直接删除，不会影响交互效果。

内容的提问来源于stack exchange，提问作者A. Nana