legend3---videojs存储视频的播放速率便于用户观看视频

legend3---videojs存储视频的播放速率便于用户观看视频

一、总结

一句话总结：

用户改变速率的时候存储视频播放速率到本地localStorage：this.on("ratechange", function(){localStorage.fry_videojs_playbackRate=this.playbackRate();});

用户加载视频的时候从本地存储中获取视频的播放速率就好：this.playbackRate(localStorage.fry_videojs_playbackRate);

二、videojs本地存储视频的播放速率

博客对应课程的视频位置：

1、先找videojs的常用监听事件

videojs的一些监听事件汇总_Q147351的博客-CSDN博客_videojs 事件https://blog.csdn.net/Q147351/article/details/106663908/

在里面可以找到监控播放速率改变的方法

var playerVideo = videojs("my-player", options, function onPlayerReady() {

videojs.log('Your player is ready!');

this.on("ratechange", function(){

console.log("播放速率改变")

});

});

2、google一下 videojs change speed

如下链接可以找到

https://stackoverflow.com/questions/19112255/change-the-video-playback-speed-using-video-js

Helpful: If you need to change the speed after the videoplayer is ready (Jquery), use:

var video = videojs('videoplay', options);

video.ready(function() {

// faster speed initially

this.playbackRate(1.5);

});

这里用this.playbackRate()不仅可以设置当前的播放速度，还可以获取当前的播放速度

3、再搜一下html5本地存储

在这里我们可以看到有localStorage，就用这个了

HTML 5 Web 存储https://www.w3school.com.cn/html5/html_5_webstorage.asp

4、解决的对应代码

用户改变速率的时候存储视频播放速率到本地localStorage，用户加载视频的时候从本地存储中获取视频的速率就好

（1）、用户改变速率的时候存储视频播放速率到本地localStorage

this.on("ratechange", function(){

//console.log("播放速率改变")

localStorage.fry_videojs_playbackRate=this.playbackRate();

});

（2）、用户加载视频的时候从本地存储中获取视频的播放速率就好

this.on('loadeddata',function(){

{{--加载好了之后跳转播放的那一块才显示--}}

$('#video_memory_play').show();

jump_play_hidden();

//调用本地存储的视频播放速度

if(localStorage.fry_videojs_playbackRate){

this.playbackRate(localStorage.fry_videojs_playbackRate);

}else{

this.playbackRate(1);

}

});

部分完整代码

好文阅读