//实现跳转到固定位置 this.player.currentTime(this.videoDetial.duration); // 自动播放 this.player.play();
无法使用
默认 playerOptions.autoplay = false; 在点击确认自动播放按钮之后,设置为playerOptions.autoplay = true; 这样会自动播放,但是不会跳转到特定位置,不知道原因,
于是使用this.player.play() 方法强行执行播放
完整代码
<video-player class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions" @canplay="canplay($event)" @play="play($event)" @pause="pause($event)" @ended="ended" @timeupdate="timeupdate($event)" @seeking="seeked" ></video-player>
data() { return { videoDetial: {}, duration: 0, // 视频总长 player:null, playerOptions: { autoplay: false, //是否自动播放 muted: false, //默认音量为静音 language: 'zh-CN', playbackRates: [0.75, 1.0, 1.25,1.5, 2.0 ], //倍数 sources: [{ //视频data type: "", src: "http://xxxx.mp4", }], fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 loop: false, // 导致视频一结束就重新开始。 preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持) aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") poster: "", //你的封面地址 notSupportedMessage:"浏览器不支持使用video标签/此视频暂无法播放,请稍后再试", controlBar:{ timeDivider:true, durationDisplay:true, remainingTimeDisplay:true } } }; }, watch: { duration(){ this.continuePlay(); } }, methods: { loop(currentTime){ // 视频轮询以计算播放时间 var current = currentTime; //可以在这里加入请求,时刻向后端请求,通知服务器,目前视频播放的时长,以便下次播放视频,直接跳转 this.last = current; }, //默认加载之后,就会执行该函数 canplay(player){ this.player = player; this.duration = player.duration(); }, //点击视频播放 play(player){ clearInterval(this.timeid); this.interval(this.player.duration); }, //点击暂停时触发 pause(){ clearInterval(this.timeid); this.loop(this.player.duration); }, ended(){ clearInterval(this.timeid); }, timeupdate(player){ // 元素的currentTime发生变化时触发 this.curr = player.currentTime; // 限制快进 if(this.curr - this.oldTime > 2) { this.player.currentTime(this.oldTime); } else { this.oldTime = this.curr; } }, seeked(){ // 跳跃操作完成时触发 clearInterval(this.timeid) }, interval(currentTime){ this.timeid = setInterval(() => { this.loop(currentTime); }, 10000); }, // 续播 continuePlay(){ let lastTime = 30; if(lastTime >0 ){ Dialog.confirm({ title: '提示', message: "上次观看到"+ (lastTime ?`${lastTime }分`:'') + 0+"秒,是否继续播放?" }).then(()=>{
// 自动跳转到对应的位置并播放
this.player.currentTime(this.videoDetial.duration);
this.player.play(); }).catch((err)=>{ this.player.currentTime(0); }) } else{ this.player.currentTime(0); } } }, created() { this.videoDetial = JSON.parse(sessionStorage.getItem('videoData')); },