项目中实现效果:
为了实现文件白板、共享屏、摄像头等一些列展示,video标签自带的全屏效果无法实现需求效果。只能通过实现伪全屏来支持。
Video标签
Video标签兼容性
首先来看看Video标签的兼容,基本满足移动端的需求。
Video标签在安卓和IOS下兼容问题
1、IOS下存在的问题
- 微信不允许自动播放视频,必须通过用户交互才能播放。针对IOS下会有弹窗提示开始直播。只要用户触摸屏幕,就播放。WeixinJSBridgeReady测试了,还是没办法解决自动播放问题(老师端推流时机不确定)。
document.addEventListener('touchstart', () => {
});
document.addEventListener("WeixinJSBridgeReady", () => {
}, false);
- IOS视频自动全屏播放
<video
muted
playsInline
webkit-playsinline="true"
/>
- 视频控制条在IOS下,只要不加 controls 属性,一般是不会显示控制条。
2、安卓手机下存在的问题
- 安卓手机播放Video层级最高的问题
<video
className="lv-video-content"
preload="auto"
x5-video-player-type="h5" // 启动H5播放的属性
mtt-playsinline="true" // 安卓手机系统全屏下播放完成后禁止广告
ref={ (e) => this.videoRef = e }
/>
- 安卓手机下Video标签控制条隐藏;到目前为止还没有反馈安卓手机出现控制条情况。
video{
width: 100%;
height: 100%;
&::-webkit-media-controls {
position: relative;
z-index: -1;
display: none !important;
}
&::-webkit-media-controls-enclosure {
display: none !important;
}
}
3、Safari和chrome无法自动播放问题
首先默认设置静音,然后等播放后就开启声音
伪直播旋转
样式旋转
.full-play-box{
width: 100%;
height: 100%;
position: relative;
.full-play-cont{
width: 100%;
height: 100%;
&.fixed{
position: fixed;
max-width: 1280px; /*px*/
min-width: 640px; /*px*/
width: 100%;
left: 50%;
top: 0;
box-sizing: border-box;
transform: translateX(-50%);
z-index: 300;
background: #fff;
.full-play-rotate{
// 旋转
transform: translate(0, 0%) rotate(90deg);
position: relative;
top: 0;
left: 100%;
// 根据左上角
transform-origin: 0% 0%;
}
}
.full-play-rotate{
width: 100%;
height: 100%;
transition: all 0.1s linear;
position: relative;
}
.fp-video-box{
height: 100%;
width: 100%;
}
}
}
旋转组件
interface IProps {
isFull: boolean
}
interface FullPlayProps {
children: any
}
interface FullPlayState {
isFull: boolean
}
/**
* 全屏播放
* @export
* @class FullVideo
* @extends {Component}
*/
export default class FullVideo extends Component<FullPlayProps, FullPlayState> {
constructor(props) {
super(props)
this.fullEventPlay.bind(this)
this.signOutFull.bind(this)
this.state = {
isFull: false
}
}
private fullRef:HTMLDivElement = null;
private outRef:HTMLDivElement = null;
componentDidMount() {
}
// 处理全屏对外的接口
handleFullStatus = () => {
if(this.state.isFull) {
this.signOutFull()
} else {
this.fullEventPlay();
}
}
// 开始全屏
private fullEventPlay() {
this.setState({
isFull: true
}, () => {
const appRef = document.getElementById('app')
this.fullRef.style.height = appRef.clientWidth + 'px';
this.fullRef.style.width = appRef.clientHeight + 'px';
})
}
// 退出全屏
private signOutFull() {
this.setState({
isFull: false
}, () => {
this.fullRef.style.height = this.outRef.clientHeight + 'px';
this.fullRef.style.width = this.outRef.clientWidth + 'px';
})
}
render() {
const { children } = this.props
const { isFull } = this.state
return (
<div className="full-play-box" ref={ (e) => this.outRef = e }>
<div className={ `full-play-cont ${ isFull ? 'fixed' : '' }` } >
<div className="full-play-rotate" ref={ (e) => this.fullRef = e }>
{ typeof(children) === 'function' ? children({ isFull }) : children}
</div>
</div>
</div>
);
}
}
关于使用Canvas播放视频。
而且 在某些手机下会播放不出来。是因为x5内核的浏览器上面,在Canvas上面去播放Video发现是不显示的。
最后
移动端Web对于Video自动播放的兼容性是在太差,尤其安卓。各种问题,各种兼容,各种心累。
本文到此结束。希望对你有帮助。
小编第一次写文章文笔有限、才疏学浅,文中如有不正之处,万望告知。