118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
Vue
<template>
|
|
<view class="video-play">
|
|
<!-- 返回 -->
|
|
<view class="icon-back" @tap="backEv" :style="{top:statusHeight+'px'}">
|
|
<i class="icon icon-return" style="font-size: 38rpx; color: #ffffff;"></i>
|
|
</view>
|
|
<!-- 视频 -->
|
|
<video id="myVideo" :style="{height:scollHeight+'px'}"
|
|
autoplay="true"
|
|
:src="videoSrc"
|
|
:enable-play-gesture="dans"
|
|
:poster="posterSrc"
|
|
:controls="isControls"
|
|
:show-center-play-btn="isCenterImg"
|
|
:show-play-btn="isBottomImg"
|
|
:show-fullscreen-btn="isFull"
|
|
@play="comePlay" @pause="comePause">
|
|
</video>
|
|
<!-- 播放按钮 -->
|
|
<view class="play-btn">
|
|
<image v-if="isPlayImg" @tap="playEv" src="/static/public/video-play.png" style="" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
statusHeight:uni.getSystemInfoSync().statusBarHeight,
|
|
scollHeight:uni.getSystemInfoSync().windowHeight,
|
|
videoSrc:'',
|
|
isPlayImg:false,
|
|
autoplay:true,
|
|
videoContext:'',
|
|
title:'',//视频的标题，全屏时在顶部展示
|
|
posterSrc:'',//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
|
|
isControls: false,//是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
|
|
dans:true,//是否开启播放手势，即双击切换播放/暂停
|
|
isCenterImg:false,//是否显示视频中间的播放按钮
|
|
isBottomImg:true,//是否显示视频底部控制栏的播放按钮
|
|
isFull:true//是否显示全屏按钮
|
|
}
|
|
},
|
|
onReady: function (res) {
|
|
this.videoContext = uni.createVideoContext('myVideo', this)
|
|
},
|
|
onLoad(options) {
|
|
// 禁用小程序分享
|
|
this.$toolAll.tools.disableShareEv();
|
|
this.videoSrc = options.src
|
|
this.posterSrc = options.posterSrc
|
|
},
|
|
methods:{
|
|
// 返回
|
|
backEv(){
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},
|
|
// 播放
|
|
playEv(){
|
|
this.isPlayImg = false;
|
|
this.autoplay = false;
|
|
this.videoContext.play();
|
|
},
|
|
|
|
//当开始/继续播放时触发play事件
|
|
comePlay(){
|
|
this.isControls = true;
|
|
},
|
|
comePause(){
|
|
this.isPlayImg = true;
|
|
this.isControls = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.video-play{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
/* 返回 */
|
|
.icon-back{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: 35px;
|
|
height: 35px;
|
|
position: fixed;
|
|
left: 20rpx;
|
|
z-index: 10;
|
|
}
|
|
.icon-back>image{
|
|
width: 19rpx;
|
|
height: 35rpx;
|
|
}
|
|
/* 播放视频 */
|
|
#myVideo{
|
|
width: 100%;
|
|
}
|
|
/* 播放按钮 */
|
|
.play-btn{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.play-btn>image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|