1. 首页
  2. 问答
  3. 如何使用YouTube屏幕截图

如何使用YouTube屏幕截图

2014-10-28 467 views
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视频嵌入到嵌入标记中进行截图。请帮我如何使用YouTube屏幕截图

来源

2014-10-28 user3392207

回答

-1

如果手动设置图像这可能会帮助你。

尝试将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>

来源

2014-10-28 09:02:33 TheSmile

+1

我想利用YouTube视频的截图特定第二。动态url输入并生成屏幕截图。这不起作用。谢谢。 – user3392207 2014-10-28 10:02:26

相关问题

 相关问题