101 lines
2.1 KiB
Vue
101 lines
2.1 KiB
Vue
<template>
|
|
<video id="player" :class="clazz" :src="src" :autoplay="autoplay" :enable-play-gesture="false"
|
|
:enable-progress-gesture="false" :show-center-play-btn="false" :show-progress="true" @play="status=1" @pause="status=0"
|
|
@timeupdate="timeupdate" @fullscreenchange="fullscreenchange">
|
|
<cover-image class="controls-play img" v-if="status==0" src="/static/play.png"></cover-image>
|
|
</video>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
inject: ['pageId', 'pageState'],
|
|
watch: {
|
|
|
|
},
|
|
props: {
|
|
clazz: {
|
|
type: String
|
|
},
|
|
src: {
|
|
type: String
|
|
},
|
|
autoplay: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showProgress: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
status: 0,
|
|
currentTime: 0,
|
|
fullScreen: false
|
|
};
|
|
},
|
|
created() {
|
|
this.viderContext = uni.createVideoContext("player");
|
|
uni.$on('keyDown', (data) => {
|
|
this.keyDown(data);
|
|
});
|
|
},
|
|
methods: {
|
|
keyDown(Arrow) {
|
|
console.log("监测到按键：" + Arrow)
|
|
switch (Arrow) {
|
|
case 'KeyLeft':
|
|
{
|
|
var time = parseInt(this.currentTime - 15, 10);
|
|
this.viderContext.seek(time < 0 ? 0 : time)
|
|
}
|
|
break;
|
|
case 'KeyRight':
|
|
{
|
|
var time = parseInt(this.currentTime + 15, 10);
|
|
this.viderContext.seek(time);
|
|
}
|
|
break;
|
|
case 'KeyEnter':
|
|
{
|
|
this.clickVideo();
|
|
}
|
|
break;
|
|
};
|
|
},
|
|
clickVideo(){
|
|
if(this.status){
|
|
this.viderContext.pause();
|
|
this.viderContext.showStatusBar();
|
|
}else{
|
|
this.viderContext.play();
|
|
this.viderContext.hideStatusBar();
|
|
}
|
|
},
|
|
timeupdate: function(e) {
|
|
this.currentTime = e.detail.currentTime;
|
|
},
|
|
fullscreenchange: function(e) {
|
|
this.fullScreen = e.detail.fullScreen;
|
|
this.pageState.handleEvent = e.detail.fullScreen;
|
|
if(this.fullScreen){
|
|
this.viderContext.play();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.controls-play.img {
|
|
position: absolute;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
top: 50%;
|
|
left:45%;
|
|
transform:translateX(-50%);
|
|
transform:translateY(-50%);
|
|
}
|
|
</style>
|