js截取视频第一帧，点击后播放视频

原创已于 2022-10-15 10:49:14 修改 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #音视频 #servlet

于 2022-10-13 11:00:22 首次发布

本文介绍如何使用JavaScript获取视频的第一帧作为预览图，并在用户点击后播放视频。涉及到的技术包括HTML5的video API和可能涉及的后端处理如servlet。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>js截取第一帧</title>
</head>

<body>
    <video id="video" width="400" onclick="opens()">
        <source src="../pins.mp4">
    </video>
    <div id="output"></div>
    <script type="text/javascript">
        (function () {
            myVid = document.getElementById("video");
            
            var video, output;
            var scale = 0.8;
            var initialize = function () {
                output = document.getElementById("output");
                video = document.getElementById("video");
                video.addEventListener('loadeddata', function () {
                    setTimeout(function () {
                        captureImage()
                    }, 1000)
                });
            };

         //默认第一帧
            var captureImage = function () {
                var 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);
                var img = document.createElement("img");
                img.src = canvas.toDataURL("image/png");
                output.appendChild(img);
            };
            initialize();
        })();
      //点击播放视频
        function opens(){
                myVid.play()
              myVid.controls=true;//是否显示控件
            }
    </script>
</body>

</html>