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

最新推荐文章于 2024-06-07 16:43:51 发布

莱克星顿的枪声

最新推荐文章于 2024-06-07 16:43:51 发布

阅读量7.4k

点赞数 1

分类专栏：前端文章标签： H5

本文链接：https://blog.csdn.net/qq_37155959/article/details/77893161

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传视频，进行预览，截取图片，并且获取时长</title>
</head>
<body>
<input type="file" οnchange="changFile(this)">
<div id="showVideo">
</div>
<br>
<br>
<br>
<br>
<div>
    <img id="image" width="50%" height="auto">
</div>
<button οnclick="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
点赞
踩
10

收藏

觉得还不错? 一键收藏
6
评论
H5上传视频，截取视频第一帧作为视频封面，遇到的坑

上传视频，进行预览，截取图片，并且获取时长点击截图 function changFile(ele) { var videoFile = ele.files[0]; var url = URL.createObjectURL(videoFile); console.log(url); var
复制链接

扫一扫

专栏目录