zoukankan      html  css  js  c++  java
  • js 获取视频的第一帧

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="UTF-8">
    <title>capture screen</title>
    </head>
    <body>
    <video id="video" controls="controls">
    <source src="img/test.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); // getContext:设置画布环境;drawImage:画画
     
                var img = document.createElement("img");
                img.src = canvas.toDataURL("image/png"); // 获取图片的url
                output.appendChild(img);
    };
     
    initialize();
    })();
    </script>
    </body>
    </html>

  • 相关阅读:
    placement new小结
    template template parameter 模板模板参数
    windows下创建和删除软链接
    gcc下载地址
    map的erase函数小结
    typedef函数指针
    宏定义条件编译中使用多条件
    关于c++模板特例化测试
    tolua使用
    c++多态
  • 原文地址:https://www.cnblogs.com/aifengguo/p/7427207.html
Copyright © 2011-2022 走看看