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

IT技术 javascript html web html5-video snapshot
2021-03-17 01:46:59

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

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

1) 加载视频

为了捕捉像素，您需要将视频加载到一个<video>标签，而不是一个iframe或object或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，但您确实需要将其设置为您想要保存结果图像的大小。在本示例中，我们假设您有一个固定的尺寸，但如果您愿意，您可以将其设置为视频尺寸的倍数。只要确保在视频的“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 文件现在保存为数据 URI，它是一个长 javascript 字符串，表示完整二进制文件的编码版本。这取决于你如何处理它。您只需将其img设置为 src:即可将其直接放入元素中myImage.src = dataUri;。

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

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

另外，具有CORS和安全性错误问题的人：overengineer.net/...（添加crossOrigin =“匿名”的视频）
2021-04-27 01:46:59
这太棒了，我想知道如何在视频的某个点拍摄快照？我的意思是例如第 10 秒。
2021-04-29 01:46:59
如果您需要以其当前分辨率捕获视频，您可以使用videoElement.videoHeight和videoElement.videoWidth
2021-04-29 01:46:59
谢谢。我刚刚制作了一个书签脚本来拍摄 Youtube 视频的快照：youtube-screenshot
2021-05-02 01:46:59
@TomaszMularczyk 调用video.currentTime = 10000之前video.play()
2021-05-08 01:46:59 
<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>
@Martian2029 因为它是一个跨域问题，这意味着视频必须在相同的域、端口和协议上。有关跨域策略的更多信息，请参阅此处.. developer.mozilla.org/en-US/docs/Web /安全/…
2021-04-17 01:46:59
效果很好！但它仅适用于视频源托管在同一服务器上而不是跨源的情况。但感谢您的解决方案！
2021-04-20 01:46:59
谢谢，在 2020 年也能完美运行！结合这种缩放，捕获的照片可以很好地适应响应页面：stackoverflow.com/a/3422425/1838044
2021-05-03 01:46:59
那你怎么解决这个问题？？@乔纳森马祖洛
2021-05-12 01:46:59
如何在拍摄快照之前隐藏画布？
2021-05-15 01:46:59

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

我有一个完整的示例，您可以在Video/canvas 屏幕截图中查看其代码，这将使您走上正确的轨道。

但是，这将需要 OP 摆脱他的iframe，并改用video标签。不是说这有什么问题，相反，只是指出它。
2021-05-13 01:46:59 
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>

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

像这样;

<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;
其它你可能感兴趣的问题
上一篇谷歌地图 - 如何以米为单位获得两点之间的距离？ 下一篇使用 JavaScript 在内存中生成 XML 文档