**
移动端无法自动获取封面
**
网上的办法几乎试了遍,没什么有用的。
最后还是加了封面图。
不过100多个视频,不可能一个一个的去截图视频封面。
用代码遍历了所有的视频。
最后获取了base64,来当视频封。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
</head>
<body>
<div id="aa"></div>
</video>
<script src='https://test.yunjing720.cn/themes/yunjing720/public/assets/js/jquery-3.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 = 172
canvas.height = 95
video.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>
需要在本地服务器运行起来
如果有好方法能显示出来,求指点。