55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<video
|
|
v-if="show"
|
|
class="video-player"
|
|
controls = ""
|
|
@play="onPlayStart"
|
|
id="videoPlayer"
|
|
autoplay="true"
|
|
@fullscreenchange="onVideoFullScreenChange"
|
|
:src="url">
|
|
</video>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "GoEasyVideoPlayer",
|
|
data () {
|
|
return {
|
|
show : false,
|
|
context: null,
|
|
url: ''
|
|
}
|
|
},
|
|
methods : {
|
|
play (video) {
|
|
this.show = true;
|
|
this.url = video.url;
|
|
this.context = uni.createVideoContext('videoPlayer');
|
|
},
|
|
onVideoFullScreenChange (e) {
|
|
//当退出全屏播放时，隐藏播放器
|
|
if(this.show && !e.detail.fullScreen){
|
|
this.show = false;
|
|
this.context.stop();
|
|
}
|
|
},
|
|
onPlayStart () {
|
|
//播放开始时，立即全屏
|
|
this.context.requestFullScreen({
|
|
direction : 0
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.video-player{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
</style> |