在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 移動端用canvas截取視頻封面,如何不截取第一幀,而是截取其它的幀?

移動端用canvas截取視頻封面,如何不截取第一幀,而是截取其它的幀?

我在微信開發(fā)工具里截的圖是可以的,但是在手機上截的圖缺變成全透明的了。
我猜是視頻的第一幀的問題
微信開發(fā)工具的截圖
電腦的截圖

手機的截圖
圖片描述

我的代碼:
JS:

function captureImage(video) {
                var scale=1
                var canvas = document.createElement("canvas");
                
                var vw=$(video).width()
                var vh=$(video).height()
                console.log(vw,vh)
                canvas.width = vw* scale;
                canvas.height =  vh* scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    
                var img = document.createElement("img");
                img.className='poster'
                img.src = canvas.toDataURL("image/png");
                $(video).prop('poster',canvas.toDataURL("image/png"))
        };

HTML標(biāo)簽:

<video src="./show.mp4" class="video" onloadeddata='captureImage(this)'></video>
回答
編輯回答
只愛你
poster
一個海報幀的URL,用于在用戶播放或者跳幀之前展示。如果屬性未指定,那么在第一幀可用之前什么都不會展示;之后第一幀就像海報幀一樣展示。

參見https://developer.mozilla.org...

<video src="./show.mp4" poster="./your-picture.png"></video>

clipboard.png

clipboard.png

2017年10月10日 07:14
編輯回答
澐染

手機端視頻不播放的情況下是不會加載的所以也就沒有截圖可以用,直接跳過了。

了解一下手機端視頻播放的限制吧 挺多的。

2018年8月4日 13:43