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

King_Gold 2020-01-08 03:39:42
在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绘图。

})
}())
...全文
2049 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
测试狂人 2021-04-27
  • 打赏
  • 举报
回复
解决了吗?过了这么久没有结帖,别浪费啊!

39,084

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧