实现效果:
代码:
<template>
<view class="player-content">
<!-- #ifdef APP-PLUS -->
<video id="myVideo" :src="srcLink" autoplay controls>
<!-- 打开全屏 -->
<image class="img img-f" v-if="btnToggle == false" @click="fullScreen" src="/static/my/fullScreen.png" mode=""></image>
<!-- 退出全屏 -->
<image class="img img-q" v-else @click="quitFullScreen" src="/static/my/quitFullScreen.png" mode=""></image>
</video>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<live-player id="live-video" :src="srcLink" autoplay class="live-player">
<!-- 打开全屏 -->
<cover-image class="img img-f" v-if="btnToggle == false" @click="fullScreen" src="/static/my/fullScreen.png" mode=""></cover-image>
<!-- 退出全屏 -->
<cover-image class="img img-q" v-else @click="quitFullScreen" src="/static/my/quitFullScreen.png" mode=""></cover-image>
</live-player>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
srcLink: "",
showControlbar: true,
timer: null,
btnToggle: false
}
},
onLoad(option) {
this.srcLink = option.id;
wx.getVideoInfo({
src: this.srcLink,
success(res) {
console.log(res)
}
})
},
watch: {
showControlbar(val, oldVal) {
if (val) {
this.timer = setTimeout(() => {
this.showControlbar = false;
}, 5000)
} else {
clearTimeout(this.timer);
}
}
},
created() {
},
methods: {
// 进入全屏
fullScreen() {
// #ifdef APP-PLUS
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen();
this.btnToggle = true;
// #endif
// #ifdef MP-WEIXIN
this.videoContext = uni.createLivePlayerContext('live-video');
this.videoContext.requestFullScreen({
direction: 90
});
this.btnToggle = true;
// #endif
},
// 退出全屏
quitFullScreen() {
// #ifdef APP-PLUS
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.exitFullScreen();
this.btnToggle = false;
// #endif
// #ifdef MP-WEIXIN
this.videoContext = uni.createLivePlayerContext('live-video');
this.videoContext.exitFullScreen();
this.btnToggle = false;
// #endif
},
}
}
</script>
<style lang="scss" scoped>
.img{
width: 52rpx;
height: 52rpx;
position: absolute;
}
.img-f{
bottom: 32rpx;
right: 32rpx;
}
.img-q{
bottom: 32rpx;
right: 96rpx;
}
.player-content {
position: relative;
width: 100%;
height: 450rpx;
display: flex;
background-size: 100% 100%;
.live-player {
width: 100%;
height: 100%;
position: relative;
}
}
//播放器弹出工具
.player-tool {
width: 100%;
height: 60rpx;
background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
left: 0;
padding: 0 45rpx;
transition: all 0.3s;
.tools {
height: 100%;
width: auto;
display: flex;
align-items: center;
.full-screen {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
color: #fff;
font-weight: bold;
}
}
.cruise {
display: flex;
align-items: center;
justify-content: center;
margin-left: 25rpx;
.iconfont {
color: #E45A3E;
font-size: 45rpx;
}
}
}
}
.btn-toggle {
color: red;
}
</style>