求助onloadeddata在手机端触发不了

sinat_37552373 2020-06-12 05:42:57

<html>
<head>
<title>设置视频封面为视频第一帧</title>
<style>
.video{
width:500px;
height:300px;
}
</style>
</head>
<body>


<video onloadeddata="showFrame(event)" src="img/ce.mp4" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" preload="auto" width="420" height="280" controls="controls" calss="video">
<source src="img/tuyu2.mp4" type="video/mp4">
</video>
<img src="" id="img">
<script>
function showFrame(event) {
let scale = 0.8,video = event.target,
canvas = document.createElement("canvas"); // 创建一个画布
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
try {
console.log(canvas.toDataURL("image/png"))
document.getElementById("img").src=canvas.toDataURL("image/png");
video.setAttribute("poster", canvas.toDataURL("image/png"));
}
catch (err) {
console.log("Error: " + err);
}
}
</script>
</body>
</html>

这个在手机端没有效果，在电脑上可以生成封面图，手机端不行

...全文

794 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

摩登开发者Oliver 2021-12-26

打赏
举报

iphone手机上视屏文件格式为mov格式，onloadeddata事件不会触发

Mero. 2022-01-19

@摩登开发者Oliver 请问解决了么

摩登开发者Oliver 2022-06-22

@Mero. ios手机上截不了图的直接给个默认的poster,mac和其它设备上可以设置预加载,不用去截图,会自动截取视频第一帧做为封面: https://blog.csdn.net/qq1114565087/article/details/125412128?spm=1001.2014.3001.5502

sinat_37552373 2020-11-12