<view v-if="isPlay">
<image
class="poster-image"
:src="courseList.video[playIndex].img"
mode="aspectFill"
></image>
<!-- 封面图-->
<view
class="poster gui-flex gui-align-items-center gui-justify-content-center"
>
<text @click="palys()" class="gui-icons"></text>
</view>
<!--播放图标-->
</view>
<video
@tap="handlePay"
show-casting-button
v-show="isPlay == false"
id="myVideo"
:show-center-play-btn="false"
class="gui-course-video"
@fullscreenchange="fullscreenchange"
:src="courseList.video[playIndex].url"
controls
></video>
this.videoContext = uni.createVideoContext("myVideo", this);
fullscreenchange(e) {
const isFullScreen = e.detail.fullScreen;
if (isFullScreen) {
this.isPlay = false;
this.videoContext.requestFullScreen({ direction: 90 });
this.videoContext.play();
console.log("video进入全屏11");
console.log(this.isPlay, "--console.log( this.isPlay )");
console.log(this.videoContext, "this.videoContext");
} else {
console.log("video退出全屏");
console.log(this.videoContext, "this.videoContext");
}
},
handlePay() {
if (this.isPlay) {
this.videoContext.play();
} else {
this.videoContext.exitFullScreen();
this.videoContext.pause();
}
this.isPlay = !this.isPlay;
},
async palys() {
this.isPlay = false;
await this.videoContext.play();
},
1.在开发者工具中 黑屏但有声音 打包后就没有问题了 为什么??也查过视频格式及编码问题!
2.给video 添加tap 事件 达到点击屏幕播放/暂停 app没问题 但是小程序中发现 tap事件与点击全屏按钮 纯在冲突!!如果不处理fullscreenchange
会导致整个界面旋转90度
3.通过处理fullscreenchange事件处理发现 点击全屏也触发了点击事件 虽然通fullscreenchange设置视频组件显示及播放可以解决页面被旋转90度的问题 但是体验不好会闪一哈
4.排查事件 层级关系(怀疑是节点直接的层级关系导致的) 时发现开发者工具无法显示video的内部节点 无法查看
微信开发者工具:(没有找到显示 shadow-root开关)
谷歌浏览器: