zoukankan      html  css  js  c++  java
  • 截取视频第一帧作为预览图片

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>capture screen</title>
    </head>
    <body>
    <video id="video" controls="controls">
    <source src="123.MP4">
    </video>
    <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");
                output.appendChild(img);
    };
     
    initialize();
    })();
    </script>
    </body>
    </html>
  • 相关阅读:
    NOI 2020 游记
    BJOI2020 游记
    行列式
    CSP-S 2019 游记
    类欧几里得算法
    有关二次离线和 Yuno loves sqrt technology II
    NOI2019 游记
    CTS 2019 Pearl
    BJOI2019 游记
    2017 山东二轮集训 Day7 国王
  • 原文地址:https://www.cnblogs.com/vofill/p/5852575.html
Copyright © 2011-2022 走看看