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

Question

我试过popcorn.capture.js并设置preload="auto"，第一个适合firefox，另一个适合pc浏览器。我想在移动设备（微信）中实现一些方法。你能帮帮我吗？

Answer 1

在移动设备上，您可能会发现设备无法自动开始下载视频。这是为了避免用户运行大量数据账单。

由于bowser没有下载视频，因此无法提取第一帧以显示视频，因此您需要使用HTML5中的海报机制将图像显示为缩略图。

一种常见的方法是在您摄取＆＃39;时在服务器端生成缩略图。或者将视频添加到服务器并将其保存在可以作为视频海报的地方。

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>