移动端用canvas截取视频封面,如何不截取第一帧,而是截取其它的帧?

WytheChan
  • 766

我在微信开发工具里截的图是可以的,但是在手机上截的图缺变成全透明的了。
我猜是视频的第一帧的问题
微信开发工具的截图
电脑的截图

手机的截图
图片描述

我的代码:
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标签:

<video src="./show.mp4" class="video" onloadeddata='captureImage(this)'></video>
回复
阅读 4.6k
2 个回答

手机端视频不播放的情况下是不会加载的所以也就没有截图可以用,直接跳过了。

了解一下手机端视频播放的限制吧 挺多的。

阿蛇
  • 3k
poster
一个海报帧的URL,用于在用户播放或者跳帧之前展示。如果属性未指定,那么在第一帧可用之前什么都不会展示;之后第一帧就像海报帧一样展示。

参见https://developer.mozilla.org...

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

clipboard.png

clipboard.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏