Playback speed control for YouTube videos? HTML5?

2020-04-17 06:20发布

问题:

I need to implement a video playback speed controller (e.g.: play the video at 1/2 speed) for youtube videos, and I'm thinking that HTML5 is currently the only way to do this (if it's even possible). I know very little about HTML5 video, but I know a lot about the youtube js API. Can anyone point me in the right direction? It's okay if the solution will only work in some browsers.

回答1:

The new iframe api allows you to control the speed of the video:

iframe api reference: Setting the playback rate

The default playback rate is 1, which indicates that the video is playing at normal speed. Playback rates may include values like 0.25, 0.5, 1, 1.5, and 2.

Also:

Calling this function does not guarantee that the playback rate will actually change.

Example code:

function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('player', {
    videoId: 'M7lc1UVf-VE',
    playerVars: { 'autoplay': 1, 'controls': 0 },
    events: {
      'onReady': function(e){
        // e.target = player
        e.target.setPlaybackRate(0.5); // set to half speed
        e.target.playVideo(); // watch lolcats in slow motion :)
      },
    }
  });
}


回答2:

http://mediaelementjs.com/ is crossbrowser,uses flash or html5 depending on the browser support and has all the methods you are looking for.



回答3:

$('#video').playbackRate = 3.0 or $('video').playbackRate = 3.0 depending on version