videojs双击全屏幕观看,videojs动态加载视频

时间:2023-03-08 20:05:23

前段时间闲来无事弄了弄video.js,感觉蛮好玩,能应用到各个应用端,自己在最后玩耍的时候,需要注意的只剩下两方面了,1,动态加载播放视频内容2,双击全屏观看,

var urlRoad = "";
var myPlayer = videojs('my-video');
videojs("my-video", {}, function() {
window.myPlayer = this;
$(" #my-video source").attr("src", "");
myPlayer.src(urlRoad);
myPlayer.load(urlRoad);
myPlayer.play(); });

只需要把路径动态放进去就好,但是点击全屏 就有点懵逼了,找了一下,最后发现了个插件,

https://github.com/ctd1500/videojs-hotkeys,按照方法就ok,瞬间精神爽 ,

var urlRoad = "";
var myPlayer = videojs('my-video');
videojs('my-video').ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableVolumeScroll: false,
enableModifiersForNumbers: false
});
});
videojs("my-video", {}, function() {
window.myPlayer = this;
$(" #my-video source").attr("src", urlRoad);
myPlayer.src(urlRoad);
myPlayer.load(urlRoad);
// myPlayer.enterFullScreen();
myPlayer.play();
myPlayer.on("ended", function(){
videoShowFun (num);
});
});

当然在视频结束后,还可以执行新的方法,言简意赅,贴代码去吧!!