|
|
@@ -5,7 +5,8 @@
|
|
|
backgroundImage: `url(${$tools.splitImgHost(goodsData.coverUrl, false)})`
|
|
|
}"
|
|
|
>
|
|
|
- <div id="player" v-show="!HideVideo"></div>
|
|
|
+ <div id="player" v-show="!HideVideo || activeSection.playSource == 1"></div>
|
|
|
+
|
|
|
<div class="recordStyle" v-if="showRecordStatus">
|
|
|
您上次看{{
|
|
|
$tools.secondToTime(this.activeSection.videoCurrentTime || 0)
|
|
|
@@ -52,7 +53,9 @@ export default {
|
|
|
timeEventStatusTimeout: null, //双重保障定时器
|
|
|
videoPauseSetTimeout: null, //定时器停留太久触发
|
|
|
failToRegister: false, //报名推送不通过
|
|
|
- videoPauseSetTimeStatus: false
|
|
|
+ videoPauseSetTimeStatus: false,
|
|
|
+ player_tencent: null,
|
|
|
+ firstPlay: true //是否初次播放
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -61,6 +64,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
+ HideVideo: function(newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ document.getElementById("player-tencent").style.display = "none";
|
|
|
+ } else {
|
|
|
+ document.getElementById("player-tencent").style.display = "block";
|
|
|
+ }
|
|
|
+ },
|
|
|
//因为刚开始获取不到goodsData的数据 所以需要监听
|
|
|
goodsData: function(newVal, oldVal) {
|
|
|
if (newVal) {
|
|
|
@@ -81,24 +91,52 @@ export default {
|
|
|
mounted() {
|
|
|
this.$bus.$on("toPlay", async item => {
|
|
|
if (this.player) {
|
|
|
- this.player.HTML5.video.removeEventListener(
|
|
|
- "timeupdate",
|
|
|
- this.timeEvent
|
|
|
- ); //监听器
|
|
|
+ console.log("1");
|
|
|
+ this.player.HTML5 &&
|
|
|
+ this.player.HTML5.video.removeEventListener(
|
|
|
+ "timeupdate",
|
|
|
+ this.timeEvent
|
|
|
+ ); //监听器
|
|
|
this.player.destroy(); //初始化播放器
|
|
|
}
|
|
|
+ if (this.player_tencent) {
|
|
|
+ console.log("2");
|
|
|
+ this.player_tencent.dispose(); //初始化播放器
|
|
|
+ }
|
|
|
this.initData(); //初始化参数
|
|
|
await this.getRecordHistoryPhoto(); //获取拍照历史记录
|
|
|
await this.getRecordLast(); //获取播放记录
|
|
|
- await this.loadPlayer(); //加载播放内容
|
|
|
- this.player.on("s2j_onPlayerInitOver", () => {
|
|
|
- this.player.on("s2j_onPlayStart", this.onPlayStatus); //视频初次播放时触发
|
|
|
- this.player.on("s2j_onVideoPause", this.onVideoPause); //视频暂停时触发
|
|
|
- this.player.on("s2j_onVideoPlay", this.onVideoPlay); //视频初次播放或由暂停恢复播放时触发
|
|
|
- this.player.on("s2j_onPlayOver", this.onPlayOver); //当前视频播放完毕时触发
|
|
|
- this.player.on("s2j_onPlayerError", this.onPlayerError); //播放出现错误时触发
|
|
|
- this.player.on("serverError", this.serverError); //发生业务逻辑错误时触发，比如授权验证失败、域名黑白名单验证不通过等错误。参数返回事件名称和错误代码。
|
|
|
- }); //播放器初始化完毕时触发。播放器提供的方法需要在此事件发生后才可以调用。
|
|
|
+ let playSource = this.activeSection.playSource || 1;
|
|
|
+ if (playSource == 2) {
|
|
|
+ await this.loadPlayer_tencent(); //加载播放内容
|
|
|
+ } else {
|
|
|
+ await this.loadPlayer(); //加载播放内容
|
|
|
+ }
|
|
|
+ this[playSource == 2 ? "player_tencent" : "player"].on(
|
|
|
+ playSource == 2 ? "loadstart" : "s2j_onPlayerInitOver",
|
|
|
+ () => {
|
|
|
+ this[playSource == 2 ? "player_tencent" : "player"].on(
|
|
|
+ playSource == 2 ? "pause" : "s2j_onVideoPause",
|
|
|
+ this.onVideoPause
|
|
|
+ ); //视频暂停时触发
|
|
|
+ this[playSource == 2 ? "player_tencent" : "player"].on(
|
|
|
+ playSource == 2 ? "playing" : "s2j_onVideoPlay",
|
|
|
+ this.onVideoPlay
|
|
|
+ ); //视频播放或由暂停恢复播放时触发
|
|
|
+ this[playSource == 2 ? "player_tencent" : "player"].on(
|
|
|
+ playSource == 2 ? "ended" : "s2j_onPlayOver",
|
|
|
+ this.onPlayOver
|
|
|
+ ); //当前视频播放完毕时触发
|
|
|
+
|
|
|
+ // this[playSource == 2 ? "player_tencent" : "player"].on(
|
|
|
+ // playSource == 2 ? "error" : "s2j_onPlayerError",
|
|
|
+ // this.onPlayerError
|
|
|
+ // ); //播放出现错误时触发
|
|
|
+ if (playSource != 2) {
|
|
|
+ this.player.on("serverError", this.serverError); //发生业务逻辑错误时触发，比如授权验证失败、域名黑白名单验证不通过等错误。参数返回事件名称和错误代码。
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ); //播放器初始化完毕时触发。播放器提供的方法需要在此事件发生后才可以调用。
|
|
|
});
|
|
|
// document.addEventListener("visibilitychange", this.pauseVideo);
|
|
|
},
|
|
|
@@ -111,6 +149,7 @@ export default {
|
|
|
this.commitTimePhoto = null;
|
|
|
this.openPhotoStatus = 0;
|
|
|
this.videoPauseSetTimeStatus = false;
|
|
|
+ this.firstPlay = true;
|
|
|
clearTimeout(this.videoPauseSetTimeout); //删除暂停计算拍照定时器
|
|
|
clearTimeout(this.timeEventStatusTimeout); //删除双重保障定时器
|
|
|
},
|
|
|
@@ -141,7 +180,11 @@ export default {
|
|
|
},
|
|
|
//从头播放
|
|
|
seekVideo0() {
|
|
|
- this.player.j2s_seekVideo(0);
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ this.player_tencent.currentTime(0);
|
|
|
+ } else {
|
|
|
+ this.player.j2s_seekVideo(0);
|
|
|
+ }
|
|
|
this.showRecordStatus = false;
|
|
|
},
|
|
|
//获取拍照历史记录
|
|
|
@@ -176,9 +219,15 @@ export default {
|
|
|
//计算拍照逻辑
|
|
|
photoLogic() {
|
|
|
if (this.photoList.length > 0 || this.activeSection.learning == 1) return; //已从历史拍照数据获得
|
|
|
- var polyvPlayerContext = this.player;
|
|
|
- let totalVideoTime = polyvPlayerContext.j2s_getDuration();
|
|
|
- let duration = polyvPlayerContext.j2s_getCurrentTime();
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ var polyvPlayerContext = this.player_tencent;
|
|
|
+ var totalVideoTime = polyvPlayerContext.duration();
|
|
|
+ var duration = polyvPlayerContext.currentTime();
|
|
|
+ } else {
|
|
|
+ var polyvPlayerContext = this.player;
|
|
|
+ var totalVideoTime = polyvPlayerContext.j2s_getDuration();
|
|
|
+ var duration = polyvPlayerContext.j2s_getCurrentTime();
|
|
|
+ }
|
|
|
if (this.goodsData.erJianErZao) {
|
|
|
this.photoList = this.randomConfig(totalVideoTime, duration);
|
|
|
} else if (this.goodsData.jjShiGongYuan && this.goodsData.orderYears) {
|
|
|
@@ -283,7 +332,11 @@ export default {
|
|
|
//postTime = true 只提交随机时间 false 提交拍照
|
|
|
postCoursePhotoRecord(postTime = false, photoUrl) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- let currentTime = this.player.j2s_getCurrentTime();
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ var currentTime = this.player_tencent.currentTime();
|
|
|
+ } else {
|
|
|
+ var currentTime = this.player.j2s_getCurrentTime();
|
|
|
+ }
|
|
|
let data = {
|
|
|
goodsId: this.goodsData.goodsId,
|
|
|
gradeId: this.goodsData.gradeId,
|
|
|
@@ -373,8 +426,39 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ //播放视频-腾讯
|
|
|
+ loadPlayer_tencent() {
|
|
|
+ return new Promise(async(resolve) => {
|
|
|
+ try {
|
|
|
+ let player_tencent_demo = document.createElement("video");
|
|
|
+ player_tencent_demo.id = "player-tencent";
|
|
|
+ document
|
|
|
+ .getElementById("player")
|
|
|
+ .insertAdjacentElement("afterend", player_tencent_demo);
|
|
|
+ const {data} = await this.$request.vodvidesignid(this.activeSection.recordingUrl)
|
|
|
+ console.log(data,'sign')
|
|
|
+ this.player_tencent = TCPlayer("player-tencent", {
|
|
|
+ width: 810,
|
|
|
+ height: 455,
|
|
|
+ preload: "auto",
|
|
|
+ autoplay: false,
|
|
|
+ // player-tencent 为播放器容器 ID，必须与 html 中一致
|
|
|
+ fileID: this.activeSection.recordingUrl, // 请传入需要播放的视频 fileID（必须）
|
|
|
+ appID: data.appID, // 请传入点播账号的 appID（必须）
|
|
|
+ licenseUrl: data.licenseUrl, // 请传入点播账号的 appID（必须）
|
|
|
+ //私有加密播放需填写 psign， psign 即播放器签名，签名介绍和生成方式参见链接：https://cloud.tencent.com/document/product/266/42436
|
|
|
+ psign:data.psign
|
|
|
+ });
|
|
|
+ this.$emit("videoScript", this.player_tencent); //抛出播放实例
|
|
|
+ resolve();
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error, "error");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
//监听器
|
|
|
timeEvent() {
|
|
|
+ console.log("监听器");
|
|
|
this.timeEventStatus = true; //双重保障
|
|
|
// 定时提交学习记录
|
|
|
this.submitStudyRecords();
|
|
|
@@ -394,7 +478,11 @@ export default {
|
|
|
this.failToRegister
|
|
|
)
|
|
|
return;
|
|
|
- let videoTime = this.player.j2s_getCurrentTime();
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ var videoTime = this.player_tencent.currentTime();
|
|
|
+ } else {
|
|
|
+ var videoTime = this.player.j2s_getCurrentTime();
|
|
|
+ }
|
|
|
let photoTime = 0; //获取拍照秒数
|
|
|
for (let i = 0; i < this.photoList.length; i++) {
|
|
|
photoTime = Number(this.photoList[i]); //获取拍照秒数
|
|
|
@@ -405,7 +493,11 @@ export default {
|
|
|
this.activeSection.learning != 1
|
|
|
) {
|
|
|
//不存在拍照历史，没有重修过，没有学过，则拍照
|
|
|
- this.player.j2s_pauseVideo(); //暂停
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ this.player_tencent.pause(); //暂停
|
|
|
+ } else {
|
|
|
+ this.player.j2s_pauseVideo(); //暂停
|
|
|
+ }
|
|
|
this.photoIndex = i;
|
|
|
this.openPhoto(); //启动拍照
|
|
|
}
|
|
|
@@ -420,38 +512,6 @@ export default {
|
|
|
this.commitTime = time + 15000;
|
|
|
}
|
|
|
},
|
|
|
- //视频初次播放时触发
|
|
|
- onPlayStatus() {
|
|
|
- //计算拍照逻辑
|
|
|
- this.photoLogic();
|
|
|
- //开启上次播放位置提示
|
|
|
- if (this.activeSection.videoCurrentTime) {
|
|
|
- this.showRecordStatus = true;
|
|
|
- this.showRecordSetTimeOut = setTimeout(() => {
|
|
|
- this.showRecordStatus = false;
|
|
|
- }, 5000);
|
|
|
- }
|
|
|
- this.player.HTML5.video.addEventListener("timeupdate", this.timeEvent); //监听器
|
|
|
- console.log("视频初次播放时触发", this.player.j2s_getCurrentTime());
|
|
|
- this.timeEventStatusTimeout = setTimeout(() => {
|
|
|
- if (!this.timeEventStatus) {
|
|
|
- this.player.j2s_pauseVideo();
|
|
|
- this.$confirm("播放器监听异常，刷新当前页面", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- showCancelButton: false,
|
|
|
- closeOnClickModal: false,
|
|
|
- closeOnPressEscape: false,
|
|
|
- showClose: false,
|
|
|
- type: "warning"
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- this.$router.go(0);
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- }
|
|
|
- }, 5000);
|
|
|
- },
|
|
|
//视频暂停时触发
|
|
|
onVideoPause() {
|
|
|
if (
|
|
|
@@ -487,6 +547,48 @@ export default {
|
|
|
},
|
|
|
//视频恢复播放时触发
|
|
|
onVideoPlay() {
|
|
|
+ if (this.firstPlay) {
|
|
|
+ this.firstPlay = false;
|
|
|
+ //计算拍照逻辑
|
|
|
+ // this.photoLogic();
|
|
|
+ //开启上次播放位置提示
|
|
|
+ if (this.activeSection.videoCurrentTime) {
|
|
|
+ this.showRecordStatus = true;
|
|
|
+ this.showRecordSetTimeOut = setTimeout(() => {
|
|
|
+ this.showRecordStatus = false;
|
|
|
+ }, 5000);
|
|
|
+ }
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ this.player_tencent.on("timeupdate", this.timeEvent); //当前视频播放中触发
|
|
|
+ } else {
|
|
|
+ this.player.HTML5.video.addEventListener(
|
|
|
+ "timeupdate",
|
|
|
+ this.timeEvent
|
|
|
+ ); //监听器
|
|
|
+ }
|
|
|
+ this.timeEventStatusTimeout = setTimeout(() => {
|
|
|
+ if (!this.timeEventStatus) {
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ this.player_tencent.pause();
|
|
|
+ } else {
|
|
|
+ this.player.j2s_pauseVideo();
|
|
|
+ }
|
|
|
+ this.$confirm("播放器监听异常，刷新当前页面", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ showCancelButton: false,
|
|
|
+ closeOnClickModal: false,
|
|
|
+ closeOnPressEscape: false,
|
|
|
+ showClose: false,
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$router.go(0);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ }, 5000);
|
|
|
+ }
|
|
|
clearTimeout(this.videoPauseSetTimeout);
|
|
|
console.log("视频恢复播放时触发");
|
|
|
},
|
|
|
@@ -546,7 +648,11 @@ export default {
|
|
|
this.exitFullscreen();
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
- this.player.j2s_pauseVideo(); //暂停
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ this.player_tencent.pause(); //暂停
|
|
|
+ } else {
|
|
|
+ this.player.j2s_pauseVideo(); //暂停
|
|
|
+ }
|
|
|
}, 1000);
|
|
|
this.$refs.takePicture.openPhoto();
|
|
|
this.HideVideo = true;
|
|
|
@@ -582,9 +688,16 @@ export default {
|
|
|
); //提交记录
|
|
|
//恢复播放
|
|
|
if (STATUS) {
|
|
|
- var polyvPlayerContext = this.player;
|
|
|
- if (polyvPlayerContext && this.openPhotoStatus !== 1) {
|
|
|
- polyvPlayerContext.j2s_resumeVideo();
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ var polyvPlayerContext = this.player_tencent;
|
|
|
+ if (polyvPlayerContext && this.openPhotoStatus !== 1) {
|
|
|
+ polyvPlayerContext.play();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var polyvPlayerContext = this.player;
|
|
|
+ if (polyvPlayerContext && this.openPhotoStatus !== 1) {
|
|
|
+ polyvPlayerContext.j2s_resumeVideo();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -617,10 +730,18 @@ export default {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
let currentTime = 0;
|
|
|
let PlayDuration = 0;
|
|
|
- var polyvPlayerContext = this.player;
|
|
|
- if (polyvPlayerContext) {
|
|
|
- currentTime = polyvPlayerContext.j2s_getCurrentTime(); //当前视频播放时刻
|
|
|
- PlayDuration = polyvPlayerContext.j2s_realPlayVideoTime(); //本次看的时长
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ var polyvPlayerContext = this.player_tencent;
|
|
|
+ if (polyvPlayerContext) {
|
|
|
+ currentTime = polyvPlayerContext.currentTime(); //当前视频播放时刻
|
|
|
+ PlayDuration = currentTime; //本次看的时长--与保利威的不一致
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var polyvPlayerContext = this.player;
|
|
|
+ if (polyvPlayerContext) {
|
|
|
+ currentTime = polyvPlayerContext.j2s_getCurrentTime(); //当前视频播放时刻
|
|
|
+ PlayDuration = polyvPlayerContext.j2s_realPlayVideoTime(); //本次看的时长
|
|
|
+ }
|
|
|
}
|
|
|
let data = {
|
|
|
orderGoodsId: parseInt(this.goodsData.orderGoodsId),
|
|
|
@@ -662,7 +783,11 @@ export default {
|
|
|
})
|
|
|
.catch(err => {
|
|
|
if (err.code === 600) {
|
|
|
- polyvPlayerContext.j2s_pauseVideo();
|
|
|
+ if (this.activeSection.playSource == 2) {
|
|
|
+ polyvPlayerContext.pause();
|
|
|
+ } else {
|
|
|
+ polyvPlayerContext.j2s_pauseVideo();
|
|
|
+ }
|
|
|
this.failToRegister = true; //报名推送不通过
|
|
|
this.$confirm(`开通信息推送不成功，无法学习！`, "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
@@ -755,6 +880,10 @@ export default {
|
|
|
this.player.HTML5.video.removeEventListener("timeupdate", this.timeEvent); //监听器
|
|
|
this.player.destroy(); //初始化播放器
|
|
|
}
|
|
|
+ if (this.player_tencent) {
|
|
|
+ this.player_tencent.off();
|
|
|
+ this.player_tencent.dispose(); //初始化播放器
|
|
|
+ }
|
|
|
this.timeEventStatus = false;
|
|
|
clearTimeout(this.timeEventStatusTimeout); //删除双重保障定时器
|
|
|
try {
|
xiexaing