提交 9ad988a9 编写于 作者: guangjun.yang's avatar guangjun.yang

视频组件问题

背景色问题
上级 cf022147
...@@ -167,6 +167,14 @@ export default { ...@@ -167,6 +167,14 @@ export default {
// 跳转到考试或课程 type 1: 考试; 2: 课程 // 跳转到考试或课程 type 1: 考试; 2: 课程
// 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试 // 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试
gotoExamOrCourse(item) { gotoExamOrCourse(item) {
if(!isWeiXin()) {
if(item.type == 1) {
Toast('请前往云鹊医APP参加考试');
} else if(item.type == 2){
Toast('请前往云鹊医APP学习课程');
}
return;
}
if(!this.logged) { if(!this.logged) {
if(item.type == 1) { if(item.type == 1) {
Toast('请前往云鹊医APP参加考试'); Toast('请前往云鹊医APP参加考试');
......
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 210px; height: 210px;
background: rgba(0, 0, 0, 0.8); // background: rgba(0, 0, 0, 0.8);
justify-content: center; justify-content: center;
align-content: center; align-content: center;
.tips { .tips {
......
此差异已折叠。
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
playsinline playsinline
x5-playsinline="true" x5-playsinline="true"
x-webkit-airplay="allow" x-webkit-airplay="allow"
x5-video-player-type="h5-page" x5-video-player-type="h5"
x5-video-player-fullscreen="false" x5-video-player-fullscreen="false"
mtt-playsinline="true" mtt-playsinline="true"
controlsList="nodownload" controlsList="nodownload"
...@@ -56,11 +56,11 @@ ...@@ -56,11 +56,11 @@
</div> </div>
<!-- 播放遮罩 --> <!-- 播放遮罩 -->
<transition name="fade"> <transition name="fade">
<div v-show="isPaused" class="cover cover-play" @click="togglePlay"></div> <div v-show="logged && isPaused" class="cover cover-play" @click="togglePlay"></div>
</transition> </transition>
<!-- 播放错误 --> <!-- 播放错误 -->
<transition name="fade"> <transition name="fade">
<div v-show="showError" class="cover cover-error"> <div v-show="logged && showError" class="cover cover-error">
<p>播放失败,请确认网络正常或重新进入页面</p> <p>播放失败,请确认网络正常或重新进入页面</p>
</div> </div>
</transition> </transition>
...@@ -102,6 +102,10 @@ import { formatLeftTimeObj } from '@/utils'; ...@@ -102,6 +102,10 @@ import { formatLeftTimeObj } from '@/utils';
export default { export default {
name: 'pica-video', name: 'pica-video',
props: { props: {
coverType: {
type: Number,
default: 0,
},
download: { download: {
type: Function, type: Function,
default: () => {} default: () => {}
...@@ -139,8 +143,10 @@ export default { ...@@ -139,8 +143,10 @@ export default {
}, },
created() { created() {
this.vid = `video_${this._uid}`; this.vid = `video_${this._uid}`;
this.playTime = 0;
const ua = navigator.userAgent; const ua = navigator.userAgent;
this.isWechat = ua.match(/(MicroMessenger)\/([\d.]+)/); // this.isWechat = ua.match(/(MicroMessenger)\/([\d.]+)/);
this.isAndroid = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
}, },
mounted() { mounted() {
if (this.isWechat) { if (this.isWechat) {
...@@ -172,15 +178,11 @@ export default { ...@@ -172,15 +178,11 @@ export default {
if (this.proved && this.player.currentTime >= this.proved) { if (this.proved && this.player.currentTime >= this.proved) {
return; return;
} }
this.player.style.display = 'block';
if (isPaused) { if (isPaused) {
this.player.play(); this.player.play();
if (this.opts.proved > 0) { this.playTime++;
this.showProved = true;
this.provedTimer && clearTimeout(this.provedTimer);
this.provedTimer = setTimeout(() => {
this.showProved = false; this.showProved = false;
}, 5000)
}
} else { } else {
this.player.pause(); this.player.pause();
} }
...@@ -192,6 +194,7 @@ export default { ...@@ -192,6 +194,7 @@ export default {
if (!this.isWechat) { if (!this.isWechat) {
return; return;
} }
this.player.style.display = 'block';
const { url = '', poster = '', proved = 0, history = 0, enable = true } = opts; const { url = '', poster = '', proved = 0, history = 0, enable = true } = opts;
this.loaded = false; this.loaded = false;
this.player.src = url; this.player.src = url;
...@@ -205,6 +208,7 @@ export default { ...@@ -205,6 +208,7 @@ export default {
this.opts = opts; this.opts = opts;
this.currentTime = null; this.currentTime = null;
this.duration = null; this.duration = null;
this.showProved = proved > 0;
this.showReplay = false; this.showReplay = false;
if (this.showError) this.showError = false; if (this.showError) this.showError = false;
}, },
...@@ -217,15 +221,22 @@ export default { ...@@ -217,15 +221,22 @@ export default {
this.reportOnOff(2); this.reportOnOff(2);
} }
this.reportLeave(); this.reportLeave();
if (this.playTime === 0) {
this.player.play();
}
this.switchUrl(opts); this.switchUrl(opts);
this.player.autoplay = true;
if (!this.enable) { if (!this.enable) {
return; return;
} }
const loop = () => { const loop = () => {
if (this.loaded) { if (this.loaded) {
this.player.play(); this.player.play();
if (!this.player.paused) {
this.isPaused = false; this.isPaused = false;
this.reportOnOff(1); this.reportOnOff(1);
this.showProved = false;
}
return null; return null;
} else { } else {
return setTimeout(() => { return setTimeout(() => {
...@@ -237,11 +248,14 @@ export default { ...@@ -237,11 +248,14 @@ export default {
}, },
// 重播 // 重播
onReplay() { onReplay() {
this.player.style.display = 'block';
this.player.currentTime = 0; this.player.currentTime = 0;
this.player.play(); this.player.play();
this.isPaused = false; this.isPaused = false;
this.reportOnOff(1); this.reportOnOff(1);
this.$emit('onReplay') this.$emit('onReplay');
this.showReplay = false;
this.provedOver = false;
}, },
// 加载完毕,获取总时长和音量。问题:移动端点击播放才会触发,且不一定会获取时长 // 加载完毕,获取总时长和音量。问题:移动端点击播放才会触发,且不一定会获取时长
loadedMetaData() { loadedMetaData() {
...@@ -260,10 +274,14 @@ export default { ...@@ -260,10 +274,14 @@ export default {
}, },
// 播放中 // 播放中
onTimeUpdate(e) { onTimeUpdate(e) {
const { currentTime, duration } = e.target;
// 试看,且超过时间
if (this.proved && currentTime >= this.proved) {
this.provedEnd();
}
if (this.provedOver) { if (this.provedOver) {
return return
} }
const { currentTime, duration } = e.target;
if (currentTime) { if (currentTime) {
this.playTime = this.formatTime(currentTime); this.playTime = this.formatTime(currentTime);
} }
...@@ -275,10 +293,6 @@ export default { ...@@ -275,10 +293,6 @@ export default {
if (currentTime < 0.1 && !this.loaded) { if (currentTime < 0.1 && !this.loaded) {
this.loadedMetaData(); this.loadedMetaData();
} }
// 试看,且超过时间
if (this.proved && currentTime >= this.proved) {
this.provedEnd();
}
}, },
// 设置进度条位置 // 设置进度条位置
setBarPosition(percent, target) { setBarPosition(percent, target) {
...@@ -311,7 +325,9 @@ export default { ...@@ -311,7 +325,9 @@ export default {
this.setBarPosition(percent, 'progressBar'); this.setBarPosition(percent, 'progressBar');
this.player.currentTime = percent * duration / 100; this.player.currentTime = percent * duration / 100;
if (this.isPaused) { if (this.isPaused) {
this.player.style.display = 'block';
this.player.play(); this.player.play();
this.playTime++;
this.isPaused = false; this.isPaused = false;
this.reportOnOff(1); this.reportOnOff(1);
} }
...@@ -360,18 +376,33 @@ export default { ...@@ -360,18 +376,33 @@ export default {
}, },
// 试看结束 // 试看结束
provedEnd() { provedEnd() {
this.provedOver = true;
this.player.pause(); this.player.pause();
this.player.currentTime = this.proved;
if (this.isAndroid) {
this.player.style.display = 'none';
}
if (!this.provedOver) {
this.$emit('onVideoEnd', { type: 2 }); this.$emit('onVideoEnd', { type: 2 });
this.reportOnOff(2);
}
this.finish = true; this.finish = true;
this.showReplay = true; this.showReplay = true;
this.reportOnOff(2); this.provedOver = true;
this.isFullScreen = false;
}, },
// 播放结束 // 播放结束
onEnded() { onEnded() {
this.$emit('onVideoEnd', { type: 1 }); this.$emit('onVideoEnd', { type: 1 });
this.finish = true; this.finish = true;
if (this.isAndroid) {
this.player.style.display = 'none';
}
this.reportOnOff(2); this.reportOnOff(2);
this.$nextTick(() => {
if (this.coverType > 0 && this.coverType !== 13) {
this.isFullScreen = false;
}
})
}, },
onError() { onError() {
if (this.url) { if (this.url) {
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册