|
|
@@ -50,11 +50,9 @@
|
|
|
videoToastShow: false,
|
|
|
config: null,
|
|
|
Elevideo: false,
|
|
|
- isInitSeek: false,
|
|
|
needSeek: false, // 是否有记录需要跳转播放
|
|
|
playTime: 0,
|
|
|
- PlayStart: 0,
|
|
|
- isSeeking: false
|
|
|
+ PlayStart: 0, // 是否初次播放（因为腾讯视频没有初次播放事件）
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -90,307 +88,248 @@
|
|
|
console.log("腾讯视频是否自动播放", this.autoplay)
|
|
|
console.log("腾讯视频是否允许拖拽进度条", this.progressControl)
|
|
|
this.$api.tcVideoSign(this.fileId).then(async (res) => {
|
|
|
- console.log('请求腾讯视频参数', res)
|
|
|
- let option = {
|
|
|
- preload: "auto",
|
|
|
- fakeFullscreen: true,
|
|
|
- // licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323759362_1/v_cube.license',
|
|
|
- plugins: {
|
|
|
- ContinuePlay: {
|
|
|
- auto: true, // 是否禁用续播功能，取值：{true,false}。
|
|
|
- },
|
|
|
- SafeCheck: true // 安全检查
|
|
|
- },
|
|
|
- autoplay: this.autoplay, // 自动播放
|
|
|
- playbackRates: playbackRate,
|
|
|
- controlBar: {
|
|
|
- progressControl: this.progressControl, // 是否禁止拖拽(隐藏)进度条
|
|
|
- playbackRateMenuButton: playbackRateIndex // 是否显示倍速切换的按钮。
|
|
|
- },
|
|
|
- // sources: [{
|
|
|
- // src: 'https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8',
|
|
|
- // }],
|
|
|
+ console.log("请求腾讯视频参数", res)
|
|
|
+ let option = {
|
|
|
+ preload: "auto",
|
|
|
+ fakeFullscreen: true,
|
|
|
+ // licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323759362_1/v_cube.license',
|
|
|
+ plugins: {
|
|
|
+ SafeCheck: true // 安全检查
|
|
|
+ },
|
|
|
+ autoplay: this.autoplay, // 自动播放
|
|
|
+ playbackRates: playbackRate,
|
|
|
+ controlBar: {
|
|
|
+ progressControl: this.progressControl, // 是否禁止拖拽(隐藏)进度条
|
|
|
+ playbackRateMenuButton: playbackRateIndex // 是否显示倍速切换的按钮。
|
|
|
+ },
|
|
|
+ // sources: [{
|
|
|
+ // src: 'https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8',
|
|
|
+ // }],
|
|
|
|
|
|
- fileID: this.fileId,
|
|
|
- appID: res.data.data.appID,
|
|
|
- psign: res.data.data.psign,
|
|
|
- licenseUrl: res.data.data.licenseUrl,
|
|
|
- };
|
|
|
- if (tcPlayerContext) {
|
|
|
- tcPlayerContext.loadVideoByID({
|
|
|
- fileID: this.fileId,
|
|
|
- appID: res.data.data.appID,
|
|
|
- psign: res.data.data.psign
|
|
|
- });
|
|
|
- tcPlayerContext.currentTime(
|
|
|
- this.currentTime || 0);
|
|
|
- } else {
|
|
|
- uni.getSystemInfo({
|
|
|
- success: (res) => {
|
|
|
- // // *****高度宽度的单位都是px
|
|
|
- // console.log(res.screenHeight); // 屏幕高度，包含导航栏
|
|
|
- // console.log(res.windowHeight); // 能够使用的窗口高度，不包含导航栏
|
|
|
- // console.log(res.screenWidth); // 屏幕宽度
|
|
|
- // console.log(res.windowWidth); // 能够使用的窗口宽度
|
|
|
- // // 能够使用的窗口高度，将px转换rpx
|
|
|
- // this.windowHeight = (res.windowHeight * (750 / res.windowWidth))
|
|
|
- // console.log(this.windowHeight)
|
|
|
- option = {
|
|
|
- width: res.windowWidth,
|
|
|
- height: 218,
|
|
|
- ...option,
|
|
|
+ fileID: this.fileId,
|
|
|
+ appID: res.data.data.appID,
|
|
|
+ psign: res.data.data.psign,
|
|
|
+ licenseUrl: res.data.data.licenseUrl,
|
|
|
};
|
|
|
- }
|
|
|
- })
|
|
|
- let player_tencent = document.createElement("video");
|
|
|
- player_tencent.style.width = "100%";
|
|
|
- player_tencent.id = "player-tencent";
|
|
|
- player_tencent.setAttribute("playsinline", true);
|
|
|
- player_tencent.setAttribute("webkit-playsinline", true);
|
|
|
- document
|
|
|
- .getElementById("player2")
|
|
|
- .insertAdjacentElement("afterend", player_tencent);
|
|
|
- tcPlayerContext = TCPlayer("player-tencent", option);
|
|
|
- tcPlayerContext.currentTime(
|
|
|
- this.currentTime || 0);
|
|
|
- this.h5StateChange();
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- playing() {
|
|
|
- // if (this.isSeeking) return;
|
|
|
- console.log("腾讯视频恢复播放");
|
|
|
- if (!this.PlayStart) {
|
|
|
- this.onPlayStart();
|
|
|
- }
|
|
|
- // 设置播放时间会重复触发
|
|
|
- if (this.needSeek) {
|
|
|
- this.videoToastShow = true;
|
|
|
- setTimeout(() => {
|
|
|
+ if (tcPlayerContext) {
|
|
|
+ tcPlayerContext.loadVideoByID({
|
|
|
+ fileID: this.fileId,
|
|
|
+ appID: res.data.data.appID,
|
|
|
+ psign: res.data.data.psign
|
|
|
+ });
|
|
|
+ tcPlayerContext.currentTime(
|
|
|
+ this.currentTime || 0);
|
|
|
+ } else {
|
|
|
+ // 获取当前设备的信息
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ // 高度宽度的单位都是px
|
|
|
+ // console.log(res.screenHeight); // 屏幕高度，包含导航栏
|
|
|
+ // console.log(res.windowHeight); // 能够使用的窗口高度，不包含导航栏
|
|
|
+ // console.log(res.screenWidth); // 屏幕宽度
|
|
|
+ // console.log(res.windowWidth); // 能够使用的窗口宽度
|
|
|
+ // 能够使用的窗口高度，将px转换rpx
|
|
|
+ // let windowHeight = (res.windowHeight * (750 / res.windowWidth));
|
|
|
+ option = {
|
|
|
+ width: res.windowWidth,
|
|
|
+ height: 218,
|
|
|
+ ...option,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let player_tencent = document.createElement("video");
|
|
|
+ player_tencent.style.width = "100%";
|
|
|
+ player_tencent.id = "player-tencent";
|
|
|
+ player_tencent.setAttribute("playsinline", true); // 设置允许行内播放
|
|
|
+ player_tencent.setAttribute("webkit-playsinline", true); // 设置允许行内播放
|
|
|
+ document
|
|
|
+ .getElementById("player2")
|
|
|
+ .insertAdjacentElement("afterend", player_tencent);
|
|
|
+ tcPlayerContext = TCPlayer("player-tencent", option);
|
|
|
+ tcPlayerContext.currentTime(
|
|
|
+ this.currentTime || 0);
|
|
|
+ this.h5StateChange();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 视频播放或由暂停恢复播放时触发
|
|
|
+ playing() {
|
|
|
+ console.log("腾讯视频恢复播放");
|
|
|
+ if (!this.PlayStart) {
|
|
|
+ this.onPlayStart();
|
|
|
+ }
|
|
|
+ // 设置播放时间会重复触发
|
|
|
+ if (this.needSeek) {
|
|
|
+ this.videoToastShow = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.closeToast();
|
|
|
+ }, 3000);
|
|
|
+ this.$emit("studyLog");
|
|
|
+ this.needSeek = false;
|
|
|
+ }
|
|
|
+ if (!this.Elevideo) {
|
|
|
+ this.Elevideo = true;
|
|
|
+ tcPlayerContext.on("timeupdate", this.timeupdate);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 视频恢复播放
|
|
|
+ resumeVideo() {
|
|
|
+ tcPlayerContext.play();
|
|
|
+ },
|
|
|
+ // 视频播放错误
|
|
|
+ playerError(err) {
|
|
|
+ console.log("腾讯视频播放err", err);
|
|
|
+ },
|
|
|
+ // 视频计时器
|
|
|
+ timeupdate(e) {
|
|
|
+ let time = 0;
|
|
|
+ if (!this.PlayStart) return
|
|
|
+ time = this.PlayStart == 1 ? (this.currentTime || 0) : this.playCurrentTime();
|
|
|
+ this.PlayStart++
|
|
|
+ this.$emit("timeupdate", time);
|
|
|
+ },
|
|
|
+ // 绑定事件
|
|
|
+ h5StateChange() {
|
|
|
+ let states = {
|
|
|
+ loadstart: "onPlayerInitOver", // 播放器初始化完毕时触发
|
|
|
+ pause: "pause", // 视频暂停时触发
|
|
|
+ playing: "playing", // 视频初次播放或由暂停恢复播放时触发
|
|
|
+ ended: "ended", // 当前视频播放完毕时触发
|
|
|
+ error: "playerError", // 播放出现错误时触发
|
|
|
+ };
|
|
|
+ let that = this;
|
|
|
+ for (const key in states) {
|
|
|
+ tcPlayerContext.on(key, function() {
|
|
|
+ that[states[key]] && that[states[key]](...arguments);
|
|
|
+ that.$emit(states[key]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 新增用户视频学习日志
|
|
|
+ studyLog() {},
|
|
|
+ // 选定时间播放
|
|
|
+ seekVideo(time) {
|
|
|
+ time = time || 0;
|
|
|
+ tcPlayerContext.currentTime(time);
|
|
|
+ },
|
|
|
+ // 重头播放
|
|
|
+ restart() {
|
|
|
+ this.seekVideo(0);
|
|
|
this.closeToast();
|
|
|
- }, 3000);
|
|
|
- this.$emit("studyLog");
|
|
|
- this.needSeek = false;
|
|
|
- }
|
|
|
- // if (!this.Elevideo) {
|
|
|
- // this.Elevideo = document.querySelector("video.plv-player-video");
|
|
|
- // this.Elevideo &&
|
|
|
- // this.Elevideo.addEventListener("timeupdate", this.timeupdate);
|
|
|
- // }
|
|
|
- if (!this.Elevideo) {
|
|
|
- this.Elevideo = true;
|
|
|
- tcPlayerContext.on("timeupdate", this.timeupdate);
|
|
|
- }
|
|
|
- },
|
|
|
- // onSeeking() {
|
|
|
- // if (!this.needSeek) {
|
|
|
- // console.log("触发拖拽");
|
|
|
- // this.isSeeking = true;
|
|
|
- // this.$emit('isSeeking', this.isSeeking);
|
|
|
- // }
|
|
|
- // },
|
|
|
- // onSeeked() {
|
|
|
- // console.log("触发拖拽结束");
|
|
|
- // this.isSeeking = false;
|
|
|
- // this.$emit('isSeeking', this.isSeeking);
|
|
|
- // },
|
|
|
- resumeVideo() {
|
|
|
- tcPlayerContext.play();
|
|
|
- },
|
|
|
- playerError(err) {
|
|
|
- console.log("腾讯视频播放err", err);
|
|
|
- },
|
|
|
- timeupdate(e) {
|
|
|
- // if (this.isSeeking) return;
|
|
|
- let time = 0;
|
|
|
- if (!this.PlayStart) return
|
|
|
- time = this.PlayStart == 1 ? (this.currentTime || 0) : this.playCurrentTime();
|
|
|
-
|
|
|
- // if (!this.isInitSeek) {
|
|
|
- // if (time >= this.ct) {
|
|
|
- // this.isInitSeek = true;
|
|
|
- // } else {
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // this.onVideoSeek1(time);
|
|
|
-
|
|
|
- this.PlayStart++
|
|
|
- this.$emit("timeupdate", time);
|
|
|
- },
|
|
|
- h5StateChange() {
|
|
|
- let states = {
|
|
|
- loadstart: "onPlayerInitOver", // 播放器初始化完毕时触发
|
|
|
- pause: "pause", // 视频暂停时触发
|
|
|
- playing: "playing", // 视频初次播放或由暂停恢复播放时触发
|
|
|
- // seeking: "onSeeking",
|
|
|
- // seeked: "onSeeked",
|
|
|
- ended: "ended", // 当前视频播放完毕时触发
|
|
|
- error: "playerError", // 播放出现错误时触发
|
|
|
- };
|
|
|
- let that = this;
|
|
|
- for (const key in states) {
|
|
|
- tcPlayerContext.on(key, function() {
|
|
|
- that[states[key]] && that[states[key]](...arguments);
|
|
|
- that.$emit(states[key]);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- onVideoSeek(start, end, vid) {
|
|
|
- // if (this.allowSeek == "off") {
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // if (end - this.playTime > 10) {
|
|
|
- // this.seekVideo(start);
|
|
|
- // }
|
|
|
- },
|
|
|
- // 新增用户视频学习日志
|
|
|
- studyLog() {
|
|
|
- // this.$http({
|
|
|
- // url: "/user/study/log",
|
|
|
- // method: "post",
|
|
|
- // data: {
|
|
|
- // goodsId: this.goodsId,
|
|
|
- // courseId: this.courseId,
|
|
|
- // moduleId: this.moduleId || 0,
|
|
|
- // chapterId: this.chapterId || 0,
|
|
|
- // sectionId: this.playSectionId || 0,
|
|
|
- // fromPlat: 1, //来源平台 1小程序 2PC网站
|
|
|
- // goodsType: 1, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
|
|
|
- // orderGoodsId: this.orderGoodsId,
|
|
|
- // },
|
|
|
- // }).then((res) => {});
|
|
|
- },
|
|
|
- onVideoSeek1(time) {
|
|
|
- if (!this.progressControl) {
|
|
|
- if (Math.abs(time - this.playTime) > 5) {
|
|
|
- console.log("进度条回拉", this.playTime, this.ct);
|
|
|
- this.seekVideo(this.playTime);
|
|
|
- } else {
|
|
|
- this.playTime = time;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- seekVideo(time) {
|
|
|
- time = time || 0;
|
|
|
- tcPlayerContext.currentTime(time);
|
|
|
- },
|
|
|
- restart() {
|
|
|
- this.seekVideo(0);
|
|
|
- this.closeToast();
|
|
|
- },
|
|
|
- // 播放时刻
|
|
|
- playCurrentTime() {
|
|
|
- if (!tcPlayerContext) {
|
|
|
- return 0;
|
|
|
- }
|
|
|
- return tcPlayerContext.currentTime();
|
|
|
- },
|
|
|
- getDuration() {
|
|
|
- return tcPlayerContext.duration();
|
|
|
- },
|
|
|
- // 本次看的时长
|
|
|
- playVideoTime() {
|
|
|
- if (!tcPlayerContext) {
|
|
|
- return 0;
|
|
|
- }
|
|
|
- return tcPlayerContext.currentTime();
|
|
|
- },
|
|
|
- // 暂停播放
|
|
|
- playPause() {
|
|
|
- if (!tcPlayerContext) {
|
|
|
- return;
|
|
|
- }
|
|
|
- tcPlayerContext.pause();
|
|
|
- },
|
|
|
- // 退出全屏
|
|
|
- exitFullScreen() {
|
|
|
- if (!tcPlayerContext) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (
|
|
|
- !!(
|
|
|
- document.webkitIsFullScreen ||
|
|
|
- document.mozFullScreen ||
|
|
|
- document.msFullscreenElement ||
|
|
|
- document.fullscreenElement
|
|
|
- )
|
|
|
- ) {
|
|
|
- try {
|
|
|
- var de = document;
|
|
|
- if (de.exitFullscreen) {
|
|
|
- de.exitFullscreen();
|
|
|
- } else if (de.mozCancelFullScreen) {
|
|
|
- de.mozCancelFullScreen();
|
|
|
- } else if (de.webkitCancelFullScreen) {
|
|
|
- de.webkitCancelFullScreen();
|
|
|
+ },
|
|
|
+ // 播放时刻
|
|
|
+ playCurrentTime() {
|
|
|
+ if (!tcPlayerContext) {
|
|
|
+ return 0;
|
|
|
}
|
|
|
- } catch (err) {}
|
|
|
- }
|
|
|
- },
|
|
|
- onPlayerInitOver() {
|
|
|
- console.log("腾讯视频加载完毕");
|
|
|
- uni.$on("playPause", this.playPause);
|
|
|
- this.$emit("loadedmetadata", tcPlayerContext);
|
|
|
- },
|
|
|
- onPlayStart() {
|
|
|
- console.log("腾讯视频初次播放");
|
|
|
- this.PlayStart = 1;
|
|
|
+ return tcPlayerContext.currentTime();
|
|
|
+ },
|
|
|
+ // 视频总时长
|
|
|
+ getDuration() {
|
|
|
+ return tcPlayerContext.duration();
|
|
|
+ },
|
|
|
+ // 本次看的时长
|
|
|
+ playVideoTime() {
|
|
|
+ if (!tcPlayerContext) {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ return tcPlayerContext.currentTime();
|
|
|
+ },
|
|
|
+ // 暂停播放
|
|
|
+ playPause() {
|
|
|
+ if (!tcPlayerContext) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ tcPlayerContext.pause();
|
|
|
+ },
|
|
|
+ // 退出全屏
|
|
|
+ exitFullScreen() {
|
|
|
+ if (!tcPlayerContext) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ !!(
|
|
|
+ document.webkitIsFullScreen ||
|
|
|
+ document.mozFullScreen ||
|
|
|
+ document.msFullscreenElement ||
|
|
|
+ document.fullscreenElement
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ try {
|
|
|
+ var de = document;
|
|
|
+ if (de.exitFullscreen) {
|
|
|
+ de.exitFullscreen();
|
|
|
+ } else if (de.mozCancelFullScreen) {
|
|
|
+ de.mozCancelFullScreen();
|
|
|
+ } else if (de.webkitCancelFullScreen) {
|
|
|
+ de.webkitCancelFullScreen();
|
|
|
+ }
|
|
|
+ } catch (err) {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 视频加载完毕
|
|
|
+ onPlayerInitOver() {
|
|
|
+ console.log("腾讯视频加载完毕");
|
|
|
+ uni.$on("playPause", this.playPause);
|
|
|
+ this.$emit("loadedmetadata", tcPlayerContext);
|
|
|
+ },
|
|
|
+ // 视频初次播放
|
|
|
+ onPlayStart() {
|
|
|
+ console.log("腾讯视频初次播放");
|
|
|
+ this.PlayStart = 1;
|
|
|
+ },
|
|
|
+ // 切换视频
|
|
|
+ changeFileId(data) {
|
|
|
+ console.log('调用腾讯视频changeFileId')
|
|
|
+ if (!data) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.config = this.$method.isObject(data) ?
|
|
|
+ data : {
|
|
|
+ fileId: data,
|
|
|
+ currentTime: this.currentTime
|
|
|
+ };
|
|
|
+ if (!this.fileId) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.PlayStart = 0;
|
|
|
+ this.loadPlayerScript(this.loadPlayer);
|
|
|
+ },
|
|
|
+ closeToast() {
|
|
|
+ this.videoToastShow = false;
|
|
|
+ },
|
|
|
},
|
|
|
- changeFileId(data) {
|
|
|
- console.log('调用腾讯视频changeFileId')
|
|
|
- if (!data) {
|
|
|
- return;
|
|
|
+ // 销毁组件
|
|
|
+ destroyed() {
|
|
|
+ if (tcPlayerContext) {
|
|
|
+ tcPlayerContext.off();
|
|
|
+ tcPlayerContext.dispose();
|
|
|
}
|
|
|
- this.config = this.$method.isObject(data) ?
|
|
|
- data : {
|
|
|
- fileId: data,
|
|
|
- currentTime: this.currentTime
|
|
|
- };
|
|
|
- if (!this.fileId) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.PlayStart = 0;
|
|
|
- this.loadPlayerScript(this.loadPlayer);
|
|
|
- },
|
|
|
- closeToast() {
|
|
|
- this.videoToastShow = false;
|
|
|
- },
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- if (tcPlayerContext) {
|
|
|
- tcPlayerContext.off();
|
|
|
- tcPlayerContext.dispose();
|
|
|
- }
|
|
|
- // // #ifdef H5
|
|
|
- // this.Elevideo &&
|
|
|
- // this.Elevideo.removeEventListener("timeupdate", this.timeupdate, false);
|
|
|
- // // #endif
|
|
|
- tcPlayerContext = null;
|
|
|
- },
|
|
|
- computed: {
|
|
|
- fileId() {
|
|
|
- return this.config ? this.config.fileId : this.playFileId;
|
|
|
+ tcPlayerContext = null;
|
|
|
},
|
|
|
- ct() {
|
|
|
- return (
|
|
|
- (this.config ? this.config.currentTime : this.currentTime) ||
|
|
|
- 0
|
|
|
- );
|
|
|
+ computed: {
|
|
|
+ fileId() {
|
|
|
+ return this.config ? this.config.fileId : this.playFileId;
|
|
|
+ },
|
|
|
+ ct() {
|
|
|
+ return (
|
|
|
+ (this.config ? this.config.currentTime : this.currentTime) ||
|
|
|
+ 0
|
|
|
+ );
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
- watch: {
|
|
|
- ct: {
|
|
|
- handler(time) {
|
|
|
- if (time > 0) {
|
|
|
- this.needSeek = true;
|
|
|
- this.playTime = time;
|
|
|
- }
|
|
|
+ watch: {
|
|
|
+ ct: {
|
|
|
+ handler(time) {
|
|
|
+ if (time > 0) {
|
|
|
+ this.needSeek = true;
|
|
|
+ this.playTime = time;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
},
|
|
|
- immediate: true,
|
|
|
},
|
|
|
- },
|
|
|
- };
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
huangjianlei