Skip to content

P
pica-professional-exam
提交 cb0609c7 编写于 作者: guofeng.chen's avatar guofeng.chen
浏览文件
操作

修改视频

上级 3ab45d93
隐藏空白字符变更
内嵌 并排
正在显示 包含 197 行增加 和 76 行删除
src/components/course/pica-video.vue
浏览文件 @ cb0609c7
......@@ -9,7 +9,9 @@
preload
webkit-playsinline
playsinline
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
mtt-playsinline="true"
@loadedmetadata="loadedMetaData"
@timeupdate="onTimeUpdate"
......@@ -26,9 +28,26 @@
<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="bar-empty"></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>
......@@ -86,9 +105,13 @@ export default {
vid: '', // 唯一id
playTime: '00:00', // 播放时长
totalTime: '00:00', // 总时长
isPaused: false, // 是否暂停
isPaused: true, // 是否暂停
isFullScreen: false, // 是否全屏
progressBar: {}, // 进度条
progressBall: 0, // 进度球
rates: [2, 1.5, 1, 0.5],
curtRate: 1,
showRate: false,
showProved: false, // 试看提示文字
showError: false, // 播放错误
showResume: false, // 继续播放
......@@ -105,6 +128,7 @@ export default {
mounted() {
const player = document.getElementById(this.vid);
player.addEventListener("timeupdate", this.onTimeUpdate, false);
this.player = player;
},
beforeDestroy() {
this.timer && clearTimeout(this.timer);
......@@ -117,34 +141,31 @@ export default {
},
methods: {
togglePlay() {
if (!this.logged) {
this.$store.dispatch('goLogin');
return;
}
if (!this.url || !this.loaded || !this.enable) {
// if (!this.logged) {
// this.$store.dispatch('goLogin');
// return;
// }
if (!this.url || !this.enable) {
return;
}
let isPaused = this.isPaused;
const player = document.getElementById(this.vid);
// 试看，且超过时间
if (this.proved && player.currentTime >= this.proved) {
if (this.proved && this.player.currentTime >= this.proved) {
return;
}
if (isPaused) {
this.commonBuriedData(`984#984001`);
player.play();
this.player.play();
} else {
player.pause();
this.player.pause();
}
this.reportOnOff(isPaused ? 1 : 2);
// this.reportOnOff(isPaused ? 1 : 2);
this.isPaused = !isPaused;
},
// 切换视频
switchUrl(opts = {}) {
const { url = '', poster = '', proved = 0, history = 0, enable = true } = opts;
const player = document.getElementById(this.vid);
this.loaded = false;
player.src = url;
this.player.src = url;
this.url = url;
this.poster = poster;
this.proved = proved;
......@@ -157,7 +178,6 @@ export default {
this.currentTime = null;
this.duration = null;
if (this.showError) this.showError = false;
return player;
},
// 切换并播放
switchUrlAndPlay(opts = {}) {
......@@ -165,13 +185,13 @@ export default {
this.reportOnOff(2);
}
this.reportLeave();
const player = this.switchUrl(opts);
this.switchUrl(opts);
if (!this.enable) {
return;
}
const loop = () => {
if (this.loaded) {
player.play();
this.player.play();
this.isPaused = false;
this.reportOnOff(1);
return null;
......@@ -183,17 +203,19 @@ export default {
}
this.timer = loop();
},
// 加载完毕，获取总时长和音量
loadedMetaData(e) {
let { duration } = e.target;
this.totalTime = this.formatTime(duration);
this.loaded = true;
if (this.history) {
e.target.currentTime = this.history;
this.showResume = true;
setTimeout(() => {
this.showResume = false;
}, 2000);
// 加载完毕，获取总时长和音量。问题：移动端点击播放才会触发，且不一定会获取时长
loadedMetaData() {
let duration = this.player.duration;
if (duration) {
this.totalTime = this.formatTime(duration);
this.loaded = true;
if (this.history) {
this.player.currentTime = this.history;
this.showResume = true;
setTimeout(() => {
this.showResume = false;
}, 2000);
}
}
},
// 播放中
......@@ -210,6 +232,9 @@ export default {
this.currentTime = currentTime;
this.duration = duration;
}
if (currentTime < 0.1 && !this.loaded) {
this.loadedMetaData();
}
// 试看，且超过时间
if (this.proved && currentTime >= this.proved) {
this.provedEnd();
......@@ -223,27 +248,70 @@ export default {
'-moz-transform': `-moz-translateX(${percent}%)`,
'-ms-transform': `-ms-translateX(${percent}%)`,
}
if (target === 'progressBar' && !this.isMoveingBall) {
this.progressBall = percent
}
},
// 设置进度
// 点击设置进度
setProgress(e) {
if (!this.url || !this.loaded) {
if (!this.url) {
return;
}
const { offsetX } = e;
const { width } = e.target.getBoundingClientRect();
const player = document.getElementById(this.vid);
const duration = player.duration;
this.setProgressPosition(offsetX * 100 / width);
},
// 设置进度最终位置
setProgressPosition(percent) {
const duration = this.player.duration;
// 试看，且超过时间
if (this.proved && offsetX / width >= this.proved / duration) {
if (this.proved && percent >= this.proved * 100 / duration) {
return;
}
this.setBarPosition(offsetX * 100 / width, 'progressBar');
player.currentTime = offsetX * duration / width;
this.setBarPosition(percent, 'progressBar');
this.player.currentTime = percent * duration / 100;
if (this.isPaused) {
player.play();
this.player.play();
this.isPaused = false;
this.reportOnOff(1);
// this.reportOnOff(1);
}
},
// 拖动进度条
onBallStart(e) {
this.isMoveingBall = true;
const { width } = this.$el.querySelector('.progress-inner').getBoundingClientRect();
const { pageX } = e.changedTouches[0];
this.ballPageX = pageX;
this.progressW = width;
this.oldBallPercent = this.progressBall;
},
onBallMove(e) {
const { pageX } = e.changedTouches[0];
this.progressBall = this.getNewPercent(pageX);
},
onBallEnd(e) {
this.isMoveingBall = false;
const { pageX } = e.changedTouches[0];
const newPercent = this.getNewPercent(pageX);
this.setProgressPosition(newPercent);
},
// 获取拖动百分比
getNewPercent(pageX) {
let newPercent = (pageX - this.ballPageX) * 100 / this.progressW + this.oldBallPercent;
if (newPercent <= 0) {
newPercent = 0
} else if (newPercent >= 100) {
newPercent = 100
}
return newPercent;
},
selectRate(rate) {
if (!this.url) {
return;
}
this.player.playbackRate = rate;
this.curtRate = rate;
this.showRate = false;
},
formatTime(t) {
const time = formatLeftTimeObj(t);
......@@ -254,8 +322,7 @@ export default {
provedEnd() {
this.provedOver = true;
this.showProved = false;
const player = document.getElementById(this.vid);
player.pause();
this.player.pause();
this.$emit('onVideoEnd', { type: 2 });
this.finish = true;
this.reportOnOff(2);
......@@ -344,81 +411,115 @@ export default {
left: 0;
bottom: 0;
width: 100%;
height: px2rem(44px);
height: 44px;
}
.control-bar{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height: px2rem(44px);
height: 44px;
// transform: translate3d(0, 60px, 0);
// transition: transform 0.2s;
background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}
.btn-play{
width: px2rem(44px);
height: px2rem(44px);
width: 44px;
height: 44px;
background-image: url('~@/images/video/play.png');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: px2rem(26px) auto;
background-size: 24px auto;
}
.btn-pause{
background-image: url('~@/images/video/pause.png');
background-position: 50% 50%;
background-size: px2rem(24px) auto;
}
.progress-box{
position: relative;
display: flex;
align-items: center;
flex: 1;
width: 50px;
height: 44px;
margin-left: 5px;
}
.progress-inner{
position: relative;
width: 50px;
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.4);
overflow: hidden;
}
.progress-bar{
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: #449284;
transform: translateX(0);
pointer-events: none;
}
.progress-ball{
position: absolute;
left: 0;
top: 50%;
width: 7px;
height: 14px;
transform: translate3d(-3px, -7px, 0);
background-color: #fff;
border-radius: 2px;
}
.time-box{
color: #fff;
font-size: 14px;
font-size: 12px;
line-height: 14px;
letter-spacing: 1px;
margin-left: 12px;
}
.bar-empty{
flex: 1;
width: 1px;
width: 100px;
text-align: right;
}
.btn-screen{
width: px2rem(44px);
height: px2rem(44px);
width: 44px;
height: 44px;
background-image: url('~@/images/video/screen_full.png');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: px2rem(20px) auto;
background-size: 20px auto;
}
.btn-screen-mini{
background-image: url('~@/images/video/screen_mini.png');
}
.progress-box{
.rate-box{
position: relative;
color: #fff;
width: 40px;
height: 44px;
line-height: 44px;
font-size: 12px;
text-align: center;
}
.rate-list{
position: absolute;
left: 0;
top: 0;
bottom: 44px;
width: 100%;
padding: 3px 0;
background: rgba(0, 0, 0, .7);
border-radius: 2px;
}
.progress-inner{
position: relative;
height: 4px;
background: rgba(255, 255, 255, 0.4);
.rate-item{
height: 30px;
line-height: 30px;
}
.progress-bar{
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: #449284;
transform: translateX(0);
pointer-events: none;
.rate-active{
color: #00a1d6;
}
.proved-box{
position: absolute;
color: #fff;
font-size: 14px;
font-size: 12px;
left: 20px;
bottom: 70px;
height: 30px;
......@@ -440,7 +541,7 @@ export default {
}
.cover-play{
background: url('~@/images/video/cover_play.png') no-repeat center center;
background-size: px2rem(50px) auto;
background-size: 50px auto;
}
.cover-error, .cover-resume{
p{
......@@ -449,7 +550,7 @@ export default {
top: 50%;
width: 100%;
color: #fff;
font-size: 18px;
font-size: 15px;
text-align: center;
transform: translate3d(0, -50%, 0);
}
......
src/images/video/screen_full.png
查看替换文件 @ 3ab45d93 浏览文件 @ cb0609c7
src/images/video/screen_full.png

679 字节 | W: | H:

src/images/video/screen_full.png

1.1 KB | W: | H:

src/images/video/screen_full.png
src/images/video/screen_full.png
src/images/video/screen_full.png
src/images/video/screen_full.png
  • 2-up
  • Swipe
  • Onion skin
src/images/video/screen_mini.png
查看替换文件 @ 3ab45d93 浏览文件 @ cb0609c7
src/images/video/screen_mini.png

692 字节 | W: | H:

src/images/video/screen_mini.png

1.2 KB | W: | H:

src/images/video/screen_mini.png
src/images/video/screen_mini.png
src/images/video/screen_mini.png
src/images/video/screen_mini.png
  • 2-up
  • Swipe
  • Onion skin
src/style/common.scss
浏览文件 @ cb0609c7
......@@ -28,6 +28,26 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
}
}
img,
a,
div {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
}
::selection {
background: none;
}
::-moz-selection {
background: none;
}
::-webkit-selection {
background: none;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或