H5上传视频，截取视频第一帧作为视频封面，遇到的坑

来源：互联网发布：linux管道符号的作用编辑：程序博客网时间：2024/06/04 18:18

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>上传视频，进行预览，截取图片，并且获取时长</title></head><body><input type="file" onchange="changFile(this)"><div id="showVideo"></div><br><br><br><br><div>    <img id="image" width="50%" height="auto"></div><button onclick="manualCapture()">点击截图</button><br><canvas id="canvas_"></canvas><script>    function changFile(ele) {        var videoFile = ele.files[0];        var url = URL.createObjectURL(videoFile);        console.log(url);        var showVideo = document.getElementById("showVideo");        var htmls = ' <video width="50%" id="video" height="auto" controls> <source src="' + url + '">您的浏览器不支持 HTML5 video 元素。</video>';        showVideo.innerHTML = htmls;        //添加监听事件        //当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。        document.getElementById("video").addEventListener("loadeddata", captureImage);    }    function captureImage() {//        alert("demo7");        var scale = 0.8; //质量比例        var video = document.getElementById("video");        var canvas = document.createElement("canvas");        //计算视频宽高比        var proportion = video.clientHeight / video.clientWidth;        //计算当前窗口的宽度        var w = document.body.clientWidth        var h = w * proportion;        canvas.getContext("2d").drawImage(video, 0, 0, 300, 400);        var img = document.getElementById("image");        var len = canvas.toDataURL("image/jpg");        len = len.length / 100;        img.src = canvas.toDataURL("image/jpg");    }    function manualCapture() {        var video_ = document.getElementById("video");        //计算视频宽高比        var proportion = video_.clientHeight / video_.clientWidth;        var canvas_ = document.getElementById("canvas_");        var ctx_ = canvas_.getContext("2d");        ctx_.drawImage(video_,0,0,400,400*proportion);    }</script></body></html>

代码如上，这个代码是要在手机微信浏览器上运行的，本来想是在选择完视频文件后，截取第一帧，作为视频封面，在pc浏览器上测试没问题，视频能预览，也能截取图片。但是到了手机浏览器上就不行了，视频能预览，但是看不到截取的图片，之前一直以为是没有截取到图片，但是后来其实是截取到图片了，但是视频没有播放，所以截取到的图片就是一张空白图片，和手机背景白色混为一起了，根本就看不出来。

阅读全文

1 0