搜尋

首頁  >  問答  >  主體

javascript - 有沒辦法取得video影片裡的圖片

上傳完影片的時候取得裡面隨便一格當封面,有辦法做到沒?

伊谢尔伦伊谢尔伦2762 天前655

全部回覆(2)我來回復

  • 伊谢尔伦

    伊谢尔伦2017-06-14 10:56:30

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>capture screen</title>
    </head>
    <body>
    <video id="video" controls="controls">
    <source src="123.MP4">
    </video>
    <p id="output"></p>
    <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");
                output.appendChild(img);
    };
     
    initialize();
    })();
    </script>
    </body>
    </html>

    也是在這裡找到的。你試試

    回覆
    0
  • 迷茫

    迷茫2017-06-14 10:56:30

    canvas.getContext('2d').drawImage(video,
    0,0,canvas.width,canvas.height),利用上面的方法可以過去影片的一幀參考https://developer.mozilla.org.. .

    回覆
    0
  • 取消回覆