uniapp中video全屏适配iOS和android

效果图

使用nuve创建页面

<template>
	<div class="page">
		<video class="video" id="myVideo" :src="url" :title="title" :show-fullscreen-btn="isIOS" 
		@fullscreenchange="fullscreenchange" @error="videoErrorCallback"  autoplay>
			<cover-view class="controls-title" v-if="isIOS">
				<image class="backBox" src="/static/live/back_icon.png" @click.stop="back()">image>
				<text class="titleBox">{{title}}text>
			cover-view>
		video>
	div>
template>

<script>
	import utils from '@/common/utils.js'
	export default {
		data() {
			return {
				title:"",
				url:"",
				videoContext: null,
				isIOS:false,
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo", this);
			if(utils.devicesIsAndroid()){
				/* 进入全屏 */
				this.videoContext.requestFullScreen();
				this.isIOS = false;
			}else{
				this.isIOS = true;
			}
		},
		
		onLoad(e) {
			this.title = e.title;
			this.url = e.videoUrl;
		},
		
		methods:{
			fullscreenchange(e){
				if(!this.isIOS){
					let chage = e.detail.direction
					/* 这里的思路就是在点击返回按键时会切换至竖屏，在这时候直接返回上一级页面，或者直接在屏幕方向改变调用返回也可 */
					if(chage == 'vertical'){//此判断加不加都可
						uni.navigateBack({
							delta:1
						})
					}
				}
			},
			
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			
			videoErrorCallback(e){
				uni.showModal({
					content: '视频资源加载错误',
					showCancel: false
				})
			},
		}
	}
script>

<style>
	.video{
		width: 750rpx;
		height: 600rpx;
	}
	
	.controls-title {
		height: 120rpx;
		flex-direction: row;
		align-items: center;
	}
	
	.titleBox{
		color: #ffffff;
		font-size: 31rpx;
		margin-left: 10rpx;
	}
	
	.backBox{
		margin-left: 40rpx;
		width: 50rpx;
		height: 50rpx;
	}
style>

其中应用utils方法为，如果不想外部引用，也可以在methods中定义一个这个方法使用

function devicesIsAndroid(){
	var res = uni.getSystemInfoSync();
	var platform = res.platform;
	return (platform == 'android');
}

实现思路
因为在android手机上直接调用全屏videoContext.requestFullScreen();是没有任何问题的，title设置也生效，也有返回按键，但是在iOS端如果屏幕竖屏锁定情况下不生效，所以在ios上显示全屏按钮，并使用cover-view组件嵌套image和text实现自定义title