如何进行YouTube截图

Question

如何进行YouTube截图

3

<script src="jquery.js"></script>
<video id="video" controls preload="none" width="640" poster="http://media.w3.org/2010/05/sintel/poster.png" onloadedmetadata="$(this).trigger('video_really_ready')">
    <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
    <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
    <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
</video>
<br />

<input type="button" id="capture" value="Capture" /> Press play, and then start capturing
<div id="screen"></div>
<script>
var VideoSnapper = {

    /**
     * Capture screen as canvas
     * @param {HTMLElement} video element 
     * @param {Object} options = width of screen, height of screen, time to seek
     * @param {Function} handle function with canvas element in param
     */
    captureAsCanvas: function(video, options, handle) {

        // Create canvas and call handle function
        var callback = function() {
            // Create canvas
            var canvas = $('<canvas />').attr({
                width: options.width,
                height: options.height
            })[0];
            // Get context and draw screen on it
            canvas.getContext('2d').drawImage(video, 0, 0, options.width, options.height);
            // Seek video back if we have previous position 
            if (prevPos) {
                // Unbind seeked event - against loop
                $(video).unbind('seeked');
                // Seek video to previous position
                video.currentTime = prevPos;
            }
            // Call handle function (because of event)
            handle.call(this, canvas);    
        }

        // If we have time in options 
        if (options.time && !isNaN(parseInt(options.time))) {
            // Save previous (current) video position
            var prevPos = video.currentTime;
            // Seek to any other time
            video.currentTime = options.time;
            // Wait for seeked event
            $(video).bind('seeked', callback);              
            return;
        }

        // Otherwise callback with video context - just for compatibility with calling in the seeked event
        return callback.apply(video);
    }
};

$(function() {

    $('video').bind('video_really_ready', function() {
        var video = this;
        $('input').click(function() {
            var canvases = $('canvas');
            VideoSnapper.captureAsCanvas(video, { width: 160, height: 68, time: 40 }, function(canvas) {
                $('#screen').append(canvas);                         
                if (canvases.length == 4) 
                    canvases.eq(0).remove();     
            })
        }); 
    });

});
</script>

我该如何添加YouTube视频？无法在视频标签中播放YouTube视频。嵌入标签可以播放YouTube视频。如何通过将YouTube视频放置在嵌入标签内来截取屏幕截图。请帮助我。

- user3392207

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NVRM · Answer 1

以下书签捕获YouTube视频的点击时间，在当前视频分辨率和质量下，按照您所看到的方式进行，但没有工具栏覆盖。

javascript:void(function(){let canvas=document.createElement("canvas"),video=document.querySelector("video"),ctx=canvas.getContext("2d");canvas.width=parseInt(video.offsetWidth),canvas.height=parseInt(video.offsetHeight),ctx.drawImage(video,0,0,canvas.width,canvas.height);var base64ImageData=canvas.toDataURL("image/jpeg"),o = new Date(0),p = new Date(video.currentTime*1000),filename="Capture_"+new URL(document.location.href).searchParams.get("v")+"_"+document.title+"@"+new Date(p.getTime()-o.getTime()).toISOString().split("T")[1].split("Z")[0]+".jpg",a=document.createElement("a");a.download=filename,a.href=base64ImageData,a.click()}());

增强版书签工具，可在此处找到 https://github.com/ReeganExE/youtube-screenshot.：

图像作为文件下载提供。
不会阻止正在播放的视频。
图像标题包含Youtube ID、视频标题和视频截图的确切时间。
修改后也可在Firefox中使用。

- gorodezkiy · Answer 2

我可以用ffmpeg解决这个问题。

只需运行

ffmpeg -i inputfile.avi  -r 1 -t 1 -ss  00:00:03 image-%d.jpeg

位置

-i inputfile.avi - 输入文件
-r 1 - 每秒一帧
-t 1 - 应转换为图像的秒数
-ss 00:00:03 - 从哪一秒开始
image-%d.jpeg - 结果文件名模板

在此处找到 http://linuxers.org/tutorial/how-extract-images-video-using-ffmpeg

- TheSmile · Answer 3

如果手动设置图像，这可能会对您有所帮助。

尝试将poster="placeholder.png" //photo you want添加到视频标签中。示例

<video width="470" height="255" poster="placeholder.png" controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   <source src="video.webm" type="video/webm">
   <object data="video.mp4" width="470" height="255">
   <embed src="video.swf" width="470" height="255">
   </object>
</video>