Secret (love Fantastic Art, Youku, Tencent) online video site video 2x speed, multi-speed fast playback of the front-end implementation

I, on the video playback speed

B station, or Tencent video and other popular video sites now support video playback speed.

For the moment this feature fast-paced life, it is useful that exaggeration is to extend our lives, ha ha ha.

For a person to eat by technology, the total will inevitably focus on the technology, whether it is how to achieve it? Let us look at ~

Second, implement HTML5 video playback speed video

Dangdang to achieve is very simple to use playbackRateunder property control just fine.

playbackRateProperty is readable and writable control the playback rate of the audio and video attributes.

The syntax is as follows:

// the video acquisition rate 
var videoSpeed = video.playbackRate; 
// set the playback rate of the video, such as normal playback speed 
video.playbackRate = 1.0; 
// Get an audio playback rate 
var audioSpeed = audio.playbackRate; 
// set the playback rate of the audio, such as normal speed playback 
audio.playbackRate = 1.0;

Playback speed control simple demo

You can click here mercilessly: HTML5 Video Player demo video playbackRate speed

For example, we have 2.0 speed drop-down selection, then click on the play button below:

You can see the earthy video effects.

Related code is as follows:

document.querySelector SELECT = var ( 'SELECT'); 
var = document.querySelector Button ( 'Button'); 
// video element 
var document.querySelector Video = ( 'Video'); 
// change the playback rate 
select.addEventListener ( ' Change ', function () { 
    video.playbackRate = this.value; 
}); 
// clicks the play button 
button.addEventListener (' the click ', function () { 
    Video.play (); 
});

In fact, the key code to the following line:

video.playbackRate = this.value;

It is not simply a little beyond the imagination of it?

III Conclusion

Playback speed is HTML5 video support video playback natural, therefore, the video site usually speed playback is only supported in the HTML5 video player, the traditional flash player does not have this feature, such as love Fantastic Art video:

 

 

Epidemic is serious, we pay attention to safety, a small technical tips, hoping to make you gain something.

Thanks for reading, please share!