播放视频时,需要拍摄快照(暂停或不带),并以任何图像格式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.