如何在移动 HTML5 视频中动态使用第一帧作为海报？

Question

我试过popcorn.capture.js和设置preload="auto"，第一个只适合firefox，第二个适合pc浏览器。我想通过某种方式在移动设备（微信）中实现。你能帮帮我吗？

Answer 1

如您所知，在移动设备上，设备不会自动开始下载视频。这是为了避免用户运行支付大量数据费用。

因为bowser没有下载视频所以无法提取第一帧来显示它，所以你需要使用HTML5中的海报机制来显示图像作为缩略图。

一种常见的方法是在您 'ingest' 或将视频添加到服务器并将其保存在可以用作视频海报的位置时在服务器端生成缩略图。

Answer 2

我通过向我的视频标签添加自动播放并在加载时暂停视频解决了这个问题。

window.onload = function(){
 var myVideo = document.getElementById('myVideo');
 myVideo.pause(); 
}

<video id="myVideo" autoplay controls> 
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

How can I use dynamically the first frame as poster in mobile HTML5 video?