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>

  • 相关阅读:
    Yum安装Lamp环境
    Cacti系统监控安装
    源码安装Memcache
    Lamp源码编译+SVN安装
    分页数据列表写法
    文件单位转换函数
    Session写入到Memcache,Redis和数据库中
    [LeetCode#30]Substring with Concatenation of All Words
    快速创建php server
    Git skills in reseting files
  • 原文地址:https://www.cnblogs.com/aifengguo/p/7427207.html
Copyright © 2011-2022 走看看