如何拍摄HTML5-JavaScript视频播放器的快照？

其实我有一个带有 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>

解决方法

要将视频帧复制到图像文件,请正确加载视频,将图像复制到画布并将其导出到文件.这是完全可能的,但有几个地方可以遇到麻烦,所以让我们一次一步走.

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.

原文地址：https://www.jb51.cc/html5/168204.html

如何拍摄HTML5-JavaScript视频播放器的快照？

解决方法

相关推荐