video標籤獲取第一幀的圖片做爲預覽圖

時間 2019-11-13

標籤 video 標籤獲取第一圖片做爲預覽简体版

原文原文鏈接

video其實有 poster 屬性的。若是有這個屬性瀏覽器會自動把第一幀當作展現圖，可是移動端有的手機不支持。

咱們 poster = ‘圖片連接’ , 這樣是能夠把圖片當作視頻的預覽圖。

那沒有圖片連接怎麼辦：

注意：如下方法的視頻鏈接，必須和文件在同一個域名下，不然不生效！！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <video id="video" controls="controls" width="400" height="300">
        <source src="./video/78.mp4">
    </video>
    <br>
    <br> 視頻第一幀圖片：
    <div id="output"></div>
    <script type="text/javascript">
        (function() {
            var video, output;
            var scale = 0.8;
            var initialize = function() {
                output = document.getElementById("output");
                video = document.getElementById("video");
                video.addEventListener('loadeddata', captureImage);
            };
            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");
                img.width = 400;
                img.height = 300;
                output.appendChild(img);
            };
            initialize();
        })();
    </script>
</body>
</html>

相關標籤/搜索