第一種：

設(shè)置video屬性poster

<video class="videoContent" controls poster="img/poster.png"><source src="http://www.huazuo.com/video/brand.mp4" type="video/mp4"/>
</video>

?第二種：

設(shè)置視頻第一幀為預(yù)覽圖

HTML代碼：（調(diào)整output的left和top，覆蓋在video上）

<div style ="position:relative">
<video id ="video" class="videoContent" controls><source src="video/brand.mp4" type="video/mp4"/> </video>
<div id ="output" style ="position:absolute;left:0;left:0">
</div>
</div>

?JavaScript代碼：

var video, output; var scale = 0.6; var initialize = function() {output = document.getElementById("output");video = document.getElementById("video");video.addEventListener('loadeddata',captureImage); };var captureImage = function() {var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale；
canvas.height = video.videoHeight* scale；
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
output.appendChild(img); };initialize();

?output將在視頻加載完成后顯示第一幀，可以在播放時(shí)將output隱藏

問(wèn)題：

canvas繪制圖片，由于瀏覽器的安全考慮，如果在使用canvas繪圖的過(guò)程中，使用到了外域的圖片資源，那么在toDataURL()時(shí)會(huì)拋出安全異常：

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

?

?解決方法：

1、將視頻放在當(dāng)前域下。

2、訪問(wèn)的服務(wù)器允許，資源跨域使用，也就是說(shuō)設(shè)置了CORS跨域配置，Access-Control-Allow-Origin。

???? 然后在客戶(hù)端訪問(wèn)圖片資源的時(shí)候添加

img.setAttribute('crossOrigin', 'anonymous');

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/zella/p/7117851.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript+HTML设置视频预览图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。