37

Actually, i have a HTML5 page with JavaScript function that allow me to play a wmv video file. I need to take a snapshot when the video is playing (with pause or without) and saved in any image format JPG or BMP whatever. Any help will appreciate. Thank you.

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

5 回答 5

83

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

1) 加载视频

要捕获像素，您需要将视频加载到<video>标签中，而不是iframeorobject或embed。并且文件需要来自网络服务器，这与网页本身所在的服务器相同（除非您使用跨域标头，这很复杂并且可能无法在您的浏览器中运行。这受到浏览器安全性的限制原因。您的代码从本地文件系统加载视频，这是行不通的。

您还需要加载正确的文件格式。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，但您确实需要将其设置为您想要保存结果图像的大小。对于此示例，我们假设您有一个固定尺寸，但如果您愿意，您可以将其设置为视频尺寸的倍数。只需确保您在视频的“已加载元数据”事件中运行它，因为视频尺寸不会立即可用。

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 字符串，表示完整二进制文件的编码版本。由你决定如何处理它。您只需将其设置为 src: 即可将其直接放入img元素中myImage.src = dataUri;。

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

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

于 2012-12-07T14:46:33.900 回答
18 
<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>
于 2013-04-09T07:10:59.380 回答
13

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

我有一个完整的示例，您可以在视频/画布屏幕截图中查看其代码，这应该让您走上正轨。

于 2012-12-07T10:06:38.103 回答
2 
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>
于 2018-10-31T12:00:30.373 回答
-3

视频首先包含在画布标签中。

像这样;

<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;
于 2018-10-02T17:54:09.260 回答