canvas在移动端获取视频的第一帧画面是黑屏

2020-01-08 03:39:42 2.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Vue3移动端H5视频无交互自动播放的JSMPEG实战指南本文详细介绍了如何在Vue3移动端H5项目中实现视频无交互自动播放的JSMPEG实战方案。通过将视频转换为MPEG-1格式并使用Canvas渲染，有效绕过移动端浏览器的自动播放限制，适用于iOS和Android平台。文章包含环境搭建、视频转换、核心代码实现及性能优化等完整指南，帮助开发者快速解决移动端视频自动播放难题。阅读详情

在pc端没有问题，

在移动端第一帧显示黑屏
代码如下
(function() {
"use strict";//严格模式
var video;//video标签
var scale = 0.8;//第一帧图片与源视频的比例
video = $("#video").get(0);//赋值标签
console.log($("#video"))
video.addEventListener("loadeddata", function () {//加载完成事件，调用函数
var canvas = document.createElement("canvas");//canvas画布
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//画图
var imgsrc=canvas.toDataURL("image/png");
video.setAttribute("poster",imgsrc);
//关键一步 —— 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。

})
}())

...全文