Javascript 如何拍摄youtube截图 按play，然后开始捕获 var VideoSnapser={ /** *将屏幕捕获为画布 *@param{HTMLElement}视频元素 *@param{Object}options=屏幕宽度、屏幕高度、搜索时间 *@param{Function}在param中使用canvas元素处理函数 */ captureAsCanvas：功能（视频、选项、手柄）{ //创建画布和调用句柄函数 var callback=function（）{ //创建画布 变量画布=$（''）.attr({ 宽度：options.width， 高度：options.height })[0]; //获取上下文并在其上绘制屏幕 canvas.getContext（'2d'）.drawImage（视频，0，0，options.width，options.height）； //如果我们有以前的位置，请查找视频 如果（prevPos）{ //取消绑定寻的事件-对循环 $（视频）。解除绑定（“搜索”）； //将视频搜索到上一位置 video.currentTime=prevPos； } //调用句柄函数（由于事件） handle.call（这个，canvas）； } //如果我们有时间选择的话 if（options.time&&！isNaN（parseInt（options.time）））{ //保存上一个（当前）视频位置 var prevPos=video.currentTime； //寻求任何其他时间 video.currentTime=options.time； //等待搜索事件 $（视频）.bind（'seek'，回调）； 返回； } //否则，使用视频上下文进行回调-只是为了与所查找事件中的调用兼容 返回回调。应用（视频）； } }; $（函数（）{ $（'video'）.bind（'video\u really\u ready'，function（）{ var video=这个； $（'input'）。单击（函数（）{ var画布=$（“画布”）； VideoSnaper.captureAsCanvas（视频，{宽度：160，高度：68，时间：40}，函数（画布）{ $（“#屏幕”）.append（画布）； 如果（canvases.length==4） canvases.eq（0）.remove（）； }) }); }); });

如何添加youtube视频。无法在视频标记中播放youtube视频。embed tag正在努力播放youtube视频。如何通过将youtube视频放在嵌入标签中拍摄屏幕截图。请帮助我

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

尝试将所需的

poster=“placeholder.png”//photo添加到视频标签中

示例

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

我可以用
ffmpeg
解决这个问题

快跑

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

在哪里


-i inputfile.avi
-inputfile
-r1
-每秒一帧
-t1
-应将多少秒转换为图像
-ss 00:00:03
-从几秒钟开始
图像-%d.jpeg
-生成的文件名模板

在此处可以找到以下书签：单击时以当前视频分辨率和质量（如您所见）捕获Youtube视频，但没有覆盖工具栏

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

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，canvas.width，canvas.height）；var base64ImageData=canvas.toDataURL（“image/jpeg”），o=新日期（0），p=new Date（video.currentTime*1000），filename=“我想拍摄一秒钟的youtube视频截图。动态输入url并生成截图。这不起作用。谢谢。