需求来了，只能H5

但是貌似公司没有相关的多媒体资质，审核无法通过。所以，只能使用H5来解决，页面展示为顶部播放器，下部为留言互动。

直播流

推流：通过视频/音频采集器与服务器建立连接将实时视频音频传输到服务器。

拉流：通过客户端的播放器与服务器建立连接，实时获取直播数据，并呈现出来。

通常我们购买**云直播服务后可以在后台获取推流地址和拉流地址，这个推流地址就配置在推流工具中，如 ，如何配置到处都有。拉流地址则给到前端，进行播放。

**云拉流地址一般提供的格式有：m3u8、flv和rtmp。移动端只能使用m3u8，另外两个只支持PC端。

1. 播放器插件方案选择

都是大厂的，质量都不会差到哪里去，都支持移动端和PC端：

（1）TCPlayerLite：腾讯云提供的H5直播接入方案。

（2）Aliplayer：阿里云提供的H5直播接入方案。

默认样式比TCPlayer好看，UI支持自定义。 除了引入一个js还需要引入一个css，如果要把css放到本地，还需要去把css中引入的图片也down下来。

2. 自动播放问题

3. 横屏竖屏切换问题

1. 通过orientationchange监听屏幕进行了横屏竖屏切换。
2. 监听回调中通过window.orientation判断是横屏还是竖屏，orientation为0或180为竖屏，90或-90为横屏。
3. 如果是横屏没有必要按照原页面展示逻辑展示内容，既然横屏了，就直接做成全屏的样子。
4. 通过document.body.offsetWidth 和 offsetHeight 计算屏幕大小，并修改播放器的大小。
5. 我的项目中，播放器video标签外面还有一个容器，video设置宽高100%，我只用控制容器的大小。横屏的时候我加个样式让容器绝对定位到最上层，并占满屏幕，这个时候播放器也占满屏幕，从而达到全屏效果。
6. 代码中监听事件增加了一点延时。因为，在真机测试中，监听回调中orientation的值并未实时改变。

//横屏竖屏
checkVertical(){
    let orientation = window.orientation
    if(orientation == 90  || orientation == -90){
        return false    
    }else{
        return true
    }
}

//横屏竖屏切换
window.addEventListener(orientationchange, ()=>{
    setTimeout(()=>{
        let isVertical = checkVertical()
    },100)
});

4. 同层播放问题

iOS不存在问题，主要是安卓手机上存在问题，腾讯X5内核的浏览器会拦截播放器，让其处于最顶层，会遮挡页面弹窗或者其他的内容。

因此，需要开启播放器的x5模式。如：

5. 页面滑动问题

处理方法：

1、禁用页面默认的滑动： touch-action: none; overflow:hidden;等等。

2、采用自定义滑动：推荐使用滑动插件，多快好省，兼容多平台。参考示例：