<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();
},
- 发布:2023-08-08 21:25
- 更新:2024-08-21 17:20
- 阅读:465
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows11
HBuilderX类型: 正式
HBuilderX版本号: 3.8.7
第三方开发者工具版本号: 1.06.2306020
基础库版本号: 3.0.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
点击播放 点击全屏
点击播放 点击全屏
预期结果:
和app 效果一样
和app 效果一样
bug描述:
<video 标签 播放视频
1.在开发者工具中 黑屏但有声音 打包后就没有问题了 为什么??也查过视频格式及编码问题!
2.给video 添加tap 事件 达到点击屏幕播放/暂停 app没问题 但是小程序中发现 tap事件与点击全屏按钮 纯在冲突!!会导致整个界面旋转90度
1 个回复
1***@qq.com
我是无法全屏