数据结构
网络
关系型数据库管理系统（RDBMS）
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何对基于 HTML5-JavaScript 的视频播放器进行快照？
你可以尝试运行以下代码来对基于 HTML5-JavaScript 的视频播放器进行快照——
示例
<html>
<body>
<video controls>
<source src = "new.mp4" type = "video/mp4"></source>
</video>
<canvas id = "canvas" width = "600" height = "300"></canvas>
<button id = "snap" onclick = "snap()">Snapshot</button>
<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var myWidth, myHeight, ratio;
video.addEventListener('loadedmetadata', function() {
ratio = video.videoWidth/video.videoHeight;
myWidth = video.videoWidth-100;
myHeight = parseInt(w/ratio,10);
canvas.width = myWidth;
canvas.height = myHeight;
},false);
function snap() {
context.fillRect(0,0,myWidth,myHeight);
context.drawImage(video,0,0,myWidth,myHeight);
}
</script>
</body>
</html>
更新于：25-06-2020
697 个浏览
广告