Question

实际上，我有一个带有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>

Answer 1

将视频帧复制到图像文件涉及正确加载视频，将图像复制到画布并将其导出到文件。这是完全可能的，但有一些地方你可能遇到麻烦，所以让我们一步一步。

1）加载视频

要捕获像素，您需要将视频加载到<video>标记中，而不是iframe或object或embed。并且文件需要来自Web服务器，这与Web页面本身相同（除非您使用cross-origin headers，这很复杂并且可能无法在您的浏览器中运行。这受到浏览器的限制安全原因。您的代码从本地文件系统加载视频，这将无法正常工作。

您还需要加载正确的文件格式。 IE9 +可能会播放WMV，但任何其他浏览器都不太可能。如果可以，请使用webm，mp4和理想的ogg / theora加载multiple sources。

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文件现在保存为Data URI，这是一个长javascript字符串，表示完整二进制文件的编码版本。这取决于你如何处理它。您可以将其直接放入img元素，只需将其设置为src：myImage.src = dataUri;。

如果要将其保存到文件，则几乎需要将其上传到服务器。这是关于如何做到这一点的good tutorial。

与往常一样，以上所有内容仅限于支持它的浏览器。如果您要坚持使用wmv视频，那么您几乎只能使用Internet Explorer 9+。 6-8不支持视频标签或画布。如果您可以添加更多视频格式，则可以使用Firefox（3.5+）和Chrome。

Answer 2

<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>

Answer 3

您可以使用drawImage()功能获取当前视频的副本并将其存储在画布元素中。

我有一个完整的示例，您可以在Video/canvas screenshot查看其代码，该代码可以让您走上正确的轨道。

Answer 4

Sample code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

</head>
<body>
<h2>Upload,Save and Download video </h2>
<form method="POST" action="" enctype="multipart/form-data">
<input type="file" name="video" id="upload"/>
</...>

<script>
var input = document.getElementById('upload');

input.addEventListener('change', function(event){
var file = this.files[0];
var url = URL.createObjectURL(file);

var video = document.createElement('video');
video.src = url;

var snapshot = function(){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    var img_data = canvas.toDataURL('image/jpg');
    var filename = file.name;
    var filename = filename.split('.').slice(0, -1).join('.');



    document.getElementById("thumb").value = filename;
    $.post("thumb-saver.php", { 
        base:img_data, 
        output:"thumbnails/"+ filename +  '.jpg'
    }, function( data ) {
            //alert(data);
    });

    video.removeEventListener('canplay', snapshot);
 };

video.addEventListener('canplay', snapshot);
});
</script>

Answer 5

首先将视频粘贴在canvas标签中。

像这样；

<canvas id="target-canvas">
    <video id="video-for-thumbs" autoplay src="http://.....></video> 
</canvas>

和这样的js

setTimeout(function(){
    var canvas=$('#target-canvas')[0];
    canvas.getContext('2d').drawImage($('#video-for-thumbs')[0],0,0,1000,300);
    var f=canvas.toDataURL();
    console.log(f);

},200);

数据将在base64中呈现

如果要在视频中间显示帧，可以增加运行js的延迟时间。

其他

您可以添加播放速率以提高视频的速度，从而减少仅等待缩略图截图的等待时间

$('#video-for-thumbs')[0].playbackRate=9;

如何拍摄基于HTML5-JavaScript的视频播放器？

5 个答案: