uniapp video 标签,点击进入全屏播放,退出全屏,停止播放,暂停播放

<video 
	:src="url" 
	controls 
	id="videoId" 
	@play="play"
	@fullscreenchange="fullscreenchange">
</video>
// 播放时进入全屏
play(index) {
	let videoContext = uni.createVideoContext('videoId', this)
	videoContext.requestFullScreen()
},

//退出全屏时暂停
fullscreenchange(e) {
	if (!e.detail.fullScreen) {
		uni.createVideoContext('videoId', this).pause();
	} 
},
//退出全屏时停止
fullscreenchange (e){
	if(!e.detail.fullScreen){
		this.videoContext.stop()
	}
}

UniApp中,使用H5播放器(如VConsole的video标签播放FLV流(Flash Video)是比较常见的做法,因为uni-app默认不支持原生的FLV播放,但你可以借助第三方库如FluentPlayer.js来解决。以下是基本的步骤和示例代码: 1. 首先,在项目中安装FluentPlayer.js库: ```bash npm install fluent-player --save ``` 或者在HBuilderX中通过插件市场搜索并安装。 2. 引入FluentPlayer并创建一个视频元素: ```html <template> <view class="video-container"> <fluent-video ref="fluentVideo" :src="flvUrl"></fluent-video> </view> </template> <script setup> import { ref } from 'vue'; import FluentPlayer from '@fluentplayer/vue'; const flvUrl = 'your_flv_video_url_here'; // 替换为你的FLV流地址 let fluentVideo = ref(null); // 当页面挂载时初始化视频播放器 onMounted(() => { fluentVideo.value = new FluentPlayer({ container: document.querySelector('.video-container'), // 匹配你的容器元素 src: flvUrl, }); }); </script> ``` 3. 注意:由于跨域问题,如果FLV流服务器不允许来自 UniApp 的请求,你可能需要设置服务器支持跨域访问,或者考虑使用服务端代理来获取流。 4. 可能还需要处理错误和状态更新: ```js // 监听播放状态变化 fluentVideo.value.on('play', () => console.log('开始播放')); fluentVideo.value.on('pause', () => console.log('暂停播放')); fluentVideo.value.on('error', err => { console.error('播放出错:', err); // 处理错误,例如显示错误提示 }); // 退出全屏 fluentVideo.value.exitFullscreen(); // 关闭播放器 fluentVideo.value.destroy(); </script> ```
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值