vue-video-player 实现断点续播,currentTime不生效问题。
video设置currentTime不生效问题,谷歌浏览器不生效。
1. vue-video-player 如何实现播放视频
关于这部分,网上有很多细致的讲解,详情请看(或其他文章): 如何实现vue-video-player 组件播放
2.实现视频的播放后,需求是,要求实现断点播放。
- 即开始播放时间不再是从0秒开始,而是根据我们自己设置(一般是后端传值过来的),使用场景上一次登录学习网站,看一个学习视频,看到20分钟(看完),假设总时长50分钟,那么下次我们再次登录学习网址,点击这个视频播放时,需要依旧从20分开始播放,而不是从0开始播放。
这个时候就需要实现断点续播。
在此贴上我的组件的源代码:
<template>
<div class="an-video" :style="{ width: width, height: height }">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
:readiedTime="readiedTime"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@ready="playerReadied($event)"// 实现断点续播的关键
@timeupdate="onPlayerTimeupdate($event)"
></video-player>
</div>
</template>
<script>
import {
videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
export default {
name: "AnVideo",
components: {
videoPlayer,
},
props: {
//必传:url
width: {
//宽度
type: String,
default: "400px",
},
height: {
//高度
type: String,
default: "240px",
},
url: {
type: String, //必选参数,上传的地址
require,
},
playbackRates: {
type: Array,
default: function () {
return [0.7, 1.0, 1.5, 2.0]; //播放速度
},
},
autoplay: {
type: Boolean,
default: false, //如果true,浏览器准备好时 自动播放。
},
muted: {
type: Boolean,
default: false, //默认情况下将会消除任何音频。
},
loop: {
type: Boolean,
default: false, //视频一结束就重新开始,循环播放。
},
aspectRatio: {
type: String,
default: "16:9", //播放器的动态大小,代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
},
poster: {
type: String,
default: "/课程学习.jpg", //视频封面地址,使用了本地一个图片
},
showPoster: {
type: Boolean,
default: false, //是否展示 ,视频封面地址
},
readiedTime: {
type: String,
default: "", //设置 开始播放视频的位置,已经看完的时间
},
},
data() {
return {
playerOptions: {
}, // 播放信息
player: null,
duration: 0, // 视频总长
};
},
created() {
this.initData();
},
methods: {
initData() {
this.playerOptions = {
playbackRates: this.playbackRates, //播放速度
autoplay: this.autoplay, //如果true,浏览器准备好时开始回放。
muted: this.muted, // 默认情况下将会消除任何音频。
loop: this.loop, // 导致视频一结束就重新开始。
preload: "auto", //规定是否预加载视频 ,auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据,none - 当页面加载后不载入视频
language: "zh-CN",
aspectRatio: this.aspectRatio, // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
poster: this.poster, //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true, //全屏按钮
},
};
// 不设置封面地址
if (!this.showPoster) {
this.playerOptions.poster = "";
}
// 设置 播放地址和视频类型
if (this.url) {
let sources = [];
let typeStr = this.url.split(".");
let videoType = typeStr[typeStr.length - 1];
sources.push({
src: this.url,
type: "video/" + videoType, // 类型
});
this.playerOptions.sources = sources;
}
},
// 播放回调
onPlayerPlay(player) {
this.$emit("play", player);
console.log("onPlayerPlay");
},
// 播放暂停回调
onPlayerPause(player) {
console.log("onPlayerPause暂停", player);
this.$emit("pause");
},
// 播放结束
onPlayerEnded() {
console.log("onPlayerEnded 播放结束", player);
this.$emit("ended");
},
//获取当前播放进度 , 当前播放位置发生变化时触发。
onPlayerTimeupdate(player) {
console.log(
"onPlayerTimeupdate播放位置发生变",
player.cache_.currentTime
);
// let currentTime = player.cache_.duration; //总时长
let currentTime = player.cache_.currentTime; //当前时间
this.$emit("timeupdate", currentTime);
},
// 设置播放进度,实现断点续播。
playerReadied: function (player) {
console.log("playerReadied", player);
if (this.readiedTime) {
//后端传值来的时间
// 我的项目中,后端传值为 字符串格式 “00:00:00” 时:分:秒 (所以我做了处理,将其转化为秒)
let time = this.readiedTime.split(":");
let newTime =
Number(time[0]) * 3600 + Number(time[1]) * 60 + Number(time[2]);
console.log("处理后的时间", newTime);
player.currentTime(newTime);// 此处,设置了开始播放时间。
}
},
},
};
</script>
<style scoped>
.an-video {
/* width: 400px; */
margin-left: 2%;
}
.an-video >>> .video-js .vjs-big-play-button {
top: 40%;
left: 40%;
}
.an-video >>> .vjs-progress-control {
// 不允许自己在界面中,通过点击,调节进度。(设置后,进度条会不可手动调节)
pointer-events: none !important;
}
</style>
3.出现问题:
- 情况一: 引用的本地视频,在火狐和谷歌都可以实现断点续播
- 情况二:引用的http的地址的视频,在火狐可以生效,在谷歌无法生效。
4. 解决方案
更改设置响应头Content-Length 和 Accept-Ranges。
在ie中也会有相应的问题产生,具体的可以按照下图的提示进行更改。火狐是没有问题的。
5.注意
同样的问题并不是只有vue-video-player组件中存在,是video的原生Dom中就存在,修改方法一样。