Ahm*_*ZRI 27 javascript html5 snapshot html5-video web
实际上,我有一个带有JavaScript功能的HTML5页面,允许我播放一个wmv视频文件.我需要在播放视频时(暂停或不播放)拍摄快照,并以任何图像格式保存JPG或BMP.任何帮助将不胜感激.谢谢.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 video</title>
<script type="text/javascript">
function checkPlay() {
var myVideo = document.getElementById("myVid");
var ytStr = '<iframe width="500" height="500" src="C:\XA0002.wmv" frameborder="0" allowfullscreen></iframe>';
try {
var canPlay = document.getElementsByTagName('video')[0].canPlayType("video/wmv");
if ((canPlay == "no") || (canPlay == "")) {
myVideo.innerHTML = ytStr;
}
new MediaElement(v, { success: function (media) { media.play(); } });
} catch (err) {
myVideo.innerHTML = ytStr;
}
}
</script>
</head>
<body onload="checkPlay()">
<div id="myVid"/>
</body>
</html>
bri*_*rls 62
将视频帧复制到图像文件涉及正确加载视频,将图像复制到画布并将其导出到文件.这是完全可能的,但有一些地方你可能遇到麻烦,所以让我们一步一步.
1)加载视频
为了捕捉像素,您需要将视频加载到一个<video>标签,而不是一个iframe或object或embed.并且文件需要来自Web服务器,这与Web页面本身相同(除非您使用跨源头,这很复杂,可能无法在您的浏览器中使用.这受到浏览器的安全限制)原因.您的代码从本地文件系统加载视频,这将无法正常工作.
您还需要加载正确的文件格式.IE9 +可能会播放WMV,但任何其他浏览器都不太可能.如果可以的话,使用webm,mp4和理想的ogg/theora 加载多个源.
var container = document.getElementById("myVid"),
video = document.createElement('video'),
canCapture = true;
if (!video.canPlayType('video/wmv')) {
/* If you don't have multiple sources, you can load up a Flash fallback here
(like jPlayer), but you won't be able to capture frames */
canCapture = false;
return;
}
video.src = 'myvideo.wmv';
container.appendChild(video);
video.play(); //or put this in a button click handler if you want your own controls
2)接下来,创建画布和绘图上下文.实际上您甚至不需要将它附加到DOM,但您需要将其设置为要保存结果图像的大小.对于此示例,我们假设您有一个固定的维度,但如果您愿意,可以将其设置为视频大小的倍数.只需确保在视频中的"loadedmetadata"事件中运行,因为视频尺寸将无法立即显示.
var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');
// if you want to preview the captured image,
// attach the canvas to the DOM somewhere you can see it.
3)将图像捕获到画布并将其保存到文件中.将此代码onclick放在按钮上或计时器内的事件中 - 但是您想要确定何时捕获图像.使用drawImage方法.([本文]提供了一个很好的解释,包括安全问题.视频与图像相同.)
//draw image to canvas. scale to target dimensions
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//convert to desired file format
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'
4)导出图像文件
jpg文件现在保存为数据URI,这是一个长javascript字符串,表示完整二进制文件的编码版本.这取决于你如何处理它.您只需将其img设置为src 即可将其直接放入元素中:myImage.src = dataUri;.
如果要将其保存到文件中,则几乎需要将其上载到服务器.这是一个很好的教程,如何做到这一点.
像往常一样,以上所有内容仅限于支持它的浏览器.如果您要坚持使用wmv视频,那么您几乎只能使用Internet Explorer 9+.6-8不支持视频标签或画布.如果您可以添加更多视频格式,则可以使用Firefox(3.5+)和Chrome.
小智 14
<html>
<body>
<video controls>
<source src="C:/Users/ganesha/Desktop/Aararum.mp4" type="video/mp4"></source>
</video>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap" onclick="snap()">Snap Photo</button>
<!-- start the script ... within that declare variables as follows... -->
<script>
var video=document.querySelector('video');
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
var w,h,ratio;
//add loadedmetadata which will helps to identify video attributes
video.addEventListener('loadedmetadata', function() {
ratio = video.videoWidth/video.videoHeight;
w = video.videoWidth-100;
h = parseInt(w/ratio,10);
canvas.width = w;
canvas.height = h;
},false);
function snap() {
context.fillRect(0,0,w,h);
context.drawImage(video,0,0,w,h);
}
</script>
</body>
</html>
Ian*_*lin 12
您可以使用该drawImage()功能获取当前视频的副本并将其存储在canvas元素中.
我有一个完整的示例,您可以在Video/canvas屏幕截图中查看其代码,这些代码可以让您在正确的轨道上进行操作.