播放视频时,需要拍摄快照(暂停或不带),并以任何图像格式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>
解决方法
1)加载视频
要捕获像素,您需要将视频加载到< video>标签,而不是iframe或对象或嵌入.该文件需要来自网页服务器,这与网页本身是一样的(除非您使用cross-origin headers,这很复杂,可能无法在浏览器中运行,出于安全考虑,这受到浏览器的限制.代码从本地文件系统加载视频,这将不起作用.
您还需要加载正确的文件格式. IE9可能会播放WMV,但其他浏览器也不太可能.如果可以,加载multiple sources,使用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,canvas.width,canvas.height);
//convert to desired file format
var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'
4)导出图像文件
jpg文件现在保存为Data URI,它是一个长的JavaScript字符串,表示完整二进制文件的编码版本.这取决于你怎么做您可以将它直接放入img元素,只需将其设置为src：myImage.src = dataUri ;.
如果要将其保存到文件中,则需要将其上传到服务器.这是一个good tutorial如何做到这一点.
像往常一样,以上所有的仅限于支持它的浏览器.如果你要坚持使用wmv视频,那么你几乎局限于Internet Explorer 9. 6-8不支持视频标签或画布.如果您可以添加更多视频格式,则可以使用Firefox(3.5)和Chrome.