<div class="websocket">
<!-- poster="http://9haoguoji.oss-cn-beijing.aliyuncs.com/product/1619083692180048808.jpg" 设置 封面图 -->
<video id="video1" style="background: #ccc" width="100%" controls="controls">
<source src="123.mp4" type="video/mp4">
</video>
</div>
<script type="text/javascript">
getVideoBase64('123.mp4')
function getVideoBase64(url) {/* return new Promise(function(resolve, reject) {*/
let dataURL = '';
let video = document.createElement("video");
video.setAttribute('crossOrigin', 'anonymous'); // 解决跨域
video.setAttribute('src', url);
video.setAttribute('width', 400);
video.setAttribute('height', 240);
video.addEventListener('loadeddata', function() {let canvas = document.createElement("canvas"),
width = video.width, //canvas 的尺寸和图片一样
height = video.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(video, 0, 0, width, height); // 绘制 canvas
dataURL = canvas.toDataURL('image/jpeg'); // 转换为 base64
$('#video1 source').attr('src', dataURL)
//resolve(dataURL);
});
/*})*/
}
</script>
本地能够 线上会有跨域问题 如果用的阿里服务器 后盾勾销跨域