·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]HTML5如何实现视频截图功能的代码

时间:2017-09-29 17:23酷播
[html5]HTML5如何实现视频截图功能的代码,本文实例讲述了js+HTML5实现视频截图的方法。分享给大家供大家参考。具体如下

本文实例讲述了js+HTML5实现视频截图的方法。分享给大家供大家参考。具体如下:

1. HTML部分:

  1. <video id="video" controls="controls"> 
  2.   <source src="http://www.cuplayer.com/test.mp4" /> 
  3. </video> 
  4. <button id="capture">Capture</button> 
  5. <div id="output"></div> 

2. 点击按钮时触发如下代码:

  1. (function() { 
  2.   "use strict"; 
  3.   var video, $output; 
  4.   var scale = 0.25; 
  5.   var initialize = function() { 
  6.     $output = $("#output"); 
  7.     video = $("#video").get(0); 
  8.     $("#capture").click(captureImage);         
  9.   }; 
  10.   var captureImage = function() { 
  11.     var canvas = document.createElement("canvas"); 
  12.     canvas.width = video.videoWidth * scale; 
  13.     canvas.height = video.videoHeight * scale; 
  14.     canvas.getContext('2d') 
  15.        .drawImage(video, 0, 0, canvas.width, canvas.height); 
  16.     var img = document.createElement("img"); 
  17.     img.src = canvas.toDataURL(); 
  18.     $output.prepend(img); 
  19.   }; 
  20.   $(initialize);       
  21. }()); 

希望本文所述对大家的javascript程序设计有所帮助。

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器