Skip to content

P
pica-annual-summary
提交 d1679882 编写于 作者: guofeng.chen's avatar guofeng.chen
浏览文件
操作

添加空白页和视频默认图

上级 66c5a482
隐藏空白字符变更
内嵌 并排
正在显示 包含 138 行增加 和 79 行删除
src/components/course/pica-video.vue
浏览文件 @ d1679882
......@@ -2,81 +2,84 @@
<div
class="pica-video"
:style="{position: isFullScreen ? 'fixed' : ''}">
<video
:id="vid"
:src="url"
:poster="poster"
preload="metadata"
webkit-playsinline
playsinline
x5-playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5-page"
x5-video-player-fullscreen="false"
mtt-playsinline="true"
controlsList="nodownload"
@loadedmetadata="loadedMetaData"
@timeupdate="onTimeUpdate"
@ended="onEnded"
@error="onError"
>
</video>
<div class="video-cover" @click="showControl = !showControl"></div>
<!-- 控制栏 -->
<div class="control-box" v-show="showControl">
<div class="control-bar">
<div class="btn-play" :class="{'btn-pause': isPaused}" @click="togglePlay"></div>
<div class="progress-box" @click="setProgress">
<div class="progress-inner">
<div class="progress-bar" :style="progressBar"></div>
</div>
<div
class="progress-ball"
:style="{left: `${progressBall}%`}"
@touchstart.stop="onBallStart"
@touchmove.stop="onBallMove"
@touchend.stop="onBallEnd">
</div>
</div>
<div class="time-box">{{ playTime }}/{{ totalTime }}</div>
<!-- <div class="rate-box" @click="showRate=true">
倍速
<div class="rate-list" v-show="showRate">
<template v-if="isWechat">
<video
:id="vid"
:src="url"
:poster="poster"
preload="metadata"
webkit-playsinline
playsinline
x5-playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5-page"
x5-video-player-fullscreen="false"
mtt-playsinline="true"
controlsList="nodownload"
@loadedmetadata="loadedMetaData"
@timeupdate="onTimeUpdate"
@ended="onEnded"
@error="onError"
>
</video>
<div class="video-cover" @click="showControl = !showControl"></div>
<!-- 控制栏 -->
<div class="control-box" v-show="showControl">
<div class="control-bar">
<div class="btn-play" :class="{'btn-pause': isPaused}" @click="togglePlay"></div>
<div class="progress-box" @click="setProgress">
<div class="progress-inner">
<div class="progress-bar" :style="progressBar"></div>
</div>
<div
class="rate-item"
:class="{'rate-active': rate === curtRate}"
v-for="rate in rates"
:key="rate"
@click.stop="selectRate(rate)">{{ rate }}</div>
class="progress-ball"
:style="{left: `${progressBall}%`}"
@touchstart.stop="onBallStart"
@touchmove.stop="onBallMove"
@touchend.stop="onBallEnd">
</div>
</div>
</div> -->
<div class="btn-screen" :class="{'btn-screen-mini': isFullScreen}" @click="onFullscreen"></div>
</div>
</div>
<!-- 播放遮罩 -->
<transition name="fade">
<div v-show="isPaused" class="cover cover-play" @click="togglePlay"></div>
</transition>
<!-- 播放错误 -->
<transition name="fade">
<div v-show="showError" class="cover cover-error">
<p>播放失败，请确认网络正常或重新进入页面</p>
<div class="time-box">{{ playTime }}/{{ totalTime }}</div>
<!-- <div class="rate-box" @click="showRate=true">
倍速
<div class="rate-list" v-show="showRate">
<div
class="rate-item"
:class="{'rate-active': rate === curtRate}"
v-for="rate in rates"
:key="rate"
@click.stop="selectRate(rate)">{{ rate }}</div>
</div>
</div> -->
<div class="btn-screen" :class="{'btn-screen-mini': isFullScreen}" @click="onFullscreen"></div>
</div>
</div>
</transition>
<!-- 接续播放 -->
<transition name="fade">
<div v-show="showResume" class="cover cover-resume">
<p>上次观看至{{ history > 59 ? `${parseInt(history / 60)}分钟` : `${history}秒` }}，正在续播</p>
<!-- 播放遮罩 -->
<transition name="fade">
<div v-show="isPaused" class="cover cover-play" @click="togglePlay"></div>
</transition>
<!-- 播放错误 -->
<transition name="fade">
<div v-show="showError" class="cover cover-error">
<p>播放失败，请确认网络正常或重新进入页面</p>
</div>
</transition>
<!-- 接续播放 -->
<transition name="fade">
<div v-show="showResume" class="cover cover-resume">
<p>上次观看至{{ history > 59 ? `${parseInt(history / 60)}分钟` : `${history}秒` }}，正在续播</p>
</div>
</transition>
<!-- 弹窗放在外部处理 -->
<slot></slot>
<!-- 试看提示 -->
<div class="proved-box" v-show="showProved">
可试看{{ proved > 59 ? `${parseInt(proved / 60)}分钟` : `${proved}秒` }}，观看完整版请来 <span @click="download">云鹊医App</span>
</div>
</transition>
<!-- 弹窗放在外部处理 -->
<slot></slot>
<!-- 试看提示 -->
<div class="proved-box" v-show="showProved">
可试看{{ proved > 59 ? `${parseInt(proved / 60)}分钟` : `${proved}秒` }}，观看完整版请来 <span @click="download">云鹊医App</span>
</div>
<!-- 重新播放，只有试看有 -->
<div class="replay-box" v-show="showReplay" @click="onReplay">重新播放</div>
<!-- 重新播放，只有试看有 -->
<div class="replay-box" v-show="showReplay" @click="onReplay">重新播放</div>
</template>
<img v-else class="default-img" src="~@/images/video/course_img.png" alt="" />
</div>
</template>
......@@ -126,6 +129,7 @@ export default {
showError: false, // 播放错误
showResume: false, // 继续播放
showReplay: false, // 显示重播
isWechat: true, // 微信环境
}
},
computed: {
......@@ -135,6 +139,8 @@ export default {
},
created() {
this.vid = `video_${this._uid}`;
const ua = navigator.userAgent;
this.isWechat = ua.match(/(MicroMessenger)\/([\d.]+)/);
},
mounted() {
const player = document.getElementById(this.vid);
......@@ -607,5 +613,15 @@ export default {
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.default-img{
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate3d(-50%, -50%, 0);
}
}
</style>
src/router/router.js
浏览文件 @ d1679882
......@@ -5,6 +5,7 @@ const merge = r => require.ensure([], () => r(require('../views/merge-detail')),
const shareMerge = r => require.ensure([], () => r(require('../views/share-merge-detail')), 'share-merge')
const test = r => require.ensure([], () => r(require('../views/test-components')), 'test-components')
const courseDetail = r => require.ensure([], () => r(require('../views/course-detail')), 'course-detail')
const notFound = r => require.ensure([], () => r(require('../views/not-found')), 'not-found')
export default [{
path: '/',
......@@ -38,5 +39,9 @@ export default [{
path: '/course-detail',
component: courseDetail
},
{
path: '/not-found',
component: notFound
},
]
}]
src/views/course-detail.vue
浏览文件 @ d1679882
......@@ -111,7 +111,7 @@ export default {
{ name: '课件' },
{ name: '讨论' },
],
curtTabIdx: 1,
curtTabIdx: 0,
tabW: 0, // tab的宽度
videoH: 0, // 视频区高度
chapters: [], // 目录
......@@ -145,11 +145,11 @@ export default {
if (token && !info.id) {
this.$store.dispatch('getUserInfo');
}
// this.projectId = sessionStorage.getItem('projectId');
// if (!this.projectId) {
// this.$router.push('')
// return;
// }
this.projectId = sessionStorage.getItem('projectId');
if (!this.projectId) {
this.$router.replace('/not-found');
return;
}
this.getCourseInfo();
this.getCourseQas();
const { height } = this.$el.querySelector('.video-box').getBoundingClientRect();
......@@ -159,7 +159,8 @@ export default {
},
methods: {
getCourseInfo() {
const { projectId = 797, courseId = 2 } = this.$route.query;
const { courseId = 2 } = this.$route.query;
const projectId = this.projectId || 797;
this.showLoading = true;
this.GET(`/contents/courses/${courseId}/pcCourseInfo`, { projectId }).then(res => {
this.showLoading = false;
......@@ -330,7 +331,8 @@ export default {
});
},
getCourseQas() {
const { projectId = 797, courseId = 3 } = this.$route.query;
const { courseId = 3 } = this.$route.query;
const projectId = this.projectId || 797;
this.GET(`/contents/courses/v2/${courseId}/qas`, { projectId, pageNo: 1, pageSize: 10 }).then(res => {
if (res.code == "000000") {
this.qsList = res.data.model && res.data.model.qaPostModel || [];
......
src/views/not-found.vue 0 → 100644
浏览文件 @ d1679882
<template>
<div class="not-found">
<img class="img" src="~@/images/no-content.png" alt="" />
<p class="tip">此课程已下架，无法查看</p>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
},
methods: {
}
};
</script>
<style lang="less" scoped>
.not-found {
.img{
display: block;
width: 120px;
margin: 100px auto 0;
}
.tip{
font-size: 15px;
text-align: center;
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或