封面无法显示"/>
移动端视频video封面无法显示
**
移动端无法自动获取封面
**
网上的办法几乎试了遍，没什么有用的。
最后还是加了封面图。
不过100多个视频，不可能一个一个的去截图视频封面。
用代码遍历了所有的视频。
最后获取了base64，来当视频封。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>capture screen</title>
</head><body><div id="aa"></div></video><script src='.1.1.min.js'></script><script type="text/javascript">var arr = []var list = [{img: "",name: "aaa",flag: "false",url: "./static/video/1/1.mp4",classificationOne: "制造",classificationTwo: "制造",classificationThree: "制造"},{img: "",name: "bbb",flag: "false",url: "./static/video/1/2.mp4",classificationOne: "设备",classificationTwo: "设备",classificationThree: "设备"}]function a(num) {var video, output;var canvas = document.createElement('canvas')video = document.getElementById('video' + num)video.setAttribute('crossOrigin', 'anonymous')canvas.width = 172canvas.height = 95video.onloadeddata = (() => {canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)var dataURL = canvas.toDataURL('image/png')video.setAttribute('poster', dataURL)arr.push(dataURL)})}list.forEach((item, index) => {$('body').append(`<video id="video${index}" src='${item.url}#t=3' poster='' οnlοadstart='a(${index})' ></video>`)})</script>
</body>
</html>
需要在本地服务器运行起来
如果有好方法能显示出来，求指点。
更多推荐
移动端视频video封面无法显示
发布评论