var videoContext = uni.createVideoContext("msgVideo", this);
videoContext.requestFullScreen({
direction: 0
});
videoContext.play();
快乐学习生
- 发布：2020-05-11 16:49
- 更新：2020-07-03 14:20
- 阅读：1716
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win7
HBuilderX类型： Alpha
HBuilderX版本号： 2.7.1
手机系统： Android
手机系统版本号： Android 4.4
手机厂商： 小米
手机机型： 小米4
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
需要全屏播放
需要全屏播放
实际结果：
无法全屏播放
无法全屏播放
bug描述：
使用videoContext.requestFullScreen 全屏播放，播放不了
代码逻辑问题，当 video src 更新后会重新创建，需要 nextTick 中访问 Video API
this.$nextTick(() => {
var videoContext = uni.createVideoContext("msgVideo", this);
videoContext.requestFullScreen({
direction: 0
});
videoContext.play();
})快乐学习生 (作者)
<template>
<view class="content">
<video @fullscreenchange="stopMsgVideo" id="msgVideo" :src="video_url" v-if="video_url"></video>
<button type="default" @tap="playVideo">全屏播放</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
video_url: ''
}
},
onLoad() {},
methods: {
playVideo: function(e) {
this.video_url = 'https://txmov2.a.yximgs.com/bs2/newWatermark/MjgwMDExNjY1MzY_zh_4.mp4';
this.$nextTick(() => {
var videoContext = uni.createVideoContext("msgVideo", this);
videoContext.requestFullScreen({
direction: 0
});
videoContext.play();
})
},
stopMsgVideo: function(e) {
if (!e.detail.fullScreen) {
this.video_url = null;
}
},
}
}
</script>
<style>
</style>
