微信H5伪全屏直播踩过的坑

1,578 阅读2分钟

项目中实现效果:

6961610949985583115.gif

为了实现文件白板、共享屏、摄像头等一些列展示,video标签自带的全屏效果无法实现需求效果。只能通过实现伪全屏来支持。

Video标签

Video标签兼容性

首先来看看Video标签的兼容,基本满足移动端的需求。

image.png

Video标签在安卓和IOS下兼容问题

1、IOS下存在的问题

  1. 微信不允许自动播放视频,必须通过用户交互才能播放。针对IOS下会有弹窗提示开始直播。只要用户触摸屏幕,就播放。WeixinJSBridgeReady测试了,还是没办法解决自动播放问题(老师端推流时机不确定)。
document.addEventListener('touchstart', () => {
 });
document.addEventListener("WeixinJSBridgeReady", () => {
  }, false);
  1. IOS视频自动全屏播放
<video 
  muted
  playsInline
  webkit-playsinline="true"
  />
  1. 视频控制条在IOS下,只要不加 controls 属性,一般是不会显示控制条。

2、安卓手机下存在的问题

  1. 安卓手机播放Video层级最高的问题
 <video
  className="lv-video-content"
  preload="auto"
  x5-video-player-type="h5" // 启动H5播放的属性
  mtt-playsinline="true" // 安卓手机系统全屏下播放完成后禁止广告
  ref={ (e) => this.videoRef = e } 
/>
  1. 安卓手机下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自动播放的兼容性是在太差,尤其安卓。各种问题,各种兼容,各种心累。

本文到此结束。希望对你有帮助。

小编第一次写文章文笔有限、才疏学浅,文中如有不正之处,万望告知。