只能转换直播带货app 源码的 .mp4 文件
很多视频第一帧是黑屏，最好是交给后端处理

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<input type="file" accept="video/mp4" />

<img src="" id="firstV" alt="" style="width: 100px">

</body>

<script>

    function chooseVideo(e) {

        var file = e.files[0];

        var blob = new Blob([file]), // 文件转化成二进制文件

            url = URL.createObjectURL(blob); // 转化成 url

        // 创建 video 标签

        var videoElement = document.createElement("video");

        videoElement.src = url

        videoElement.addEventListener("canplay", function() {

            var canvas = document.createElement("canvas");

            canvas.width = videoElement.videoWidth;

            canvas.height = videoElement.videoHeight;

            canvas.getContext("2d").drawImage(videoElement, 0, 0, canvas.width, canvas.height);

            var firstFrame = canvas.toDataURL("image/png") // 第一帧图片 url

            document.getElementById("firstV").src = firstFrame

        })

    }

</script>

</html>

声明：本文由云豹科技转发自 【03 】 博客，如有侵权请联系作者删除