前言

由于疫情的影响，今年的直播带货到处都是。我们公司也决定在自己的平台上加上直播带货功能，APP端做直播端，为了方便没有下APP或者不想下APP的人群，公司决定在H5端做观看端。

所用技术

项目是用Vue来写的，直播的话引的是第三方腾讯的插件。移动直播SDLK

页面构建

在index.html引入初始化脚本

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>

页面中放置容器

<div id="id_test_video" style="width:100%; height:auto;"></div>

播放器

一般用于网页直播的视频源地址是以 M3U8 结尾的地址，我们称其为 HLS (HTTP Live Streaming)，这是苹果推出的标准，目前各种手机浏览器产品对这种格式的兼容性也最好，但它有个问题：延迟比较大，一般是20s - 30s左右的延迟。

// 初始化播放器
init(url, isLive) {
    this.player = new TcPlayer('id_test_video', {
    'm3u8': url, // 请替换成实际可用的播放地址
    'autoplay': true, // iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
    'live': isLive,
    // 'systemFullscreen': true,
    'x5_player': true,
    'x5_type': 'h5',
    // 'x5_fullscreen': 'true',
    'flash': false,
    'controls': isLive ? 'none' : 'system',
    'poster': { 'style': 'stretch', 'src': '../../assets/images/l-live-bg@2x.png' },
    'wording': {
        2032: '请求视频失败，请检查网络',
        2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
    }
    })
}

播放器参数列表：

Code	提示语	说明
1	网络错误，请检查网络配置或者播放链接是否正确。	H5 提示的错误。
2	网络错误，请检查网络配置或者播放链接是否正确。	视频格式 Web 播放器无法解码。 H5 提示的错误。
3	视频解码错误。	H5 提示的错误。
4	当前系统环境不支持播放该视频格式。	H5 提示的错误。
5	当前系统环境不支持播放该视频格式。	播放器判断当前浏览器环境不支持播放传入的视频，可能是当前浏览器不支持 MSE 或者 Flash 插件未启用。
10	请勿在 file 协议下使用播放器，可能会导致视频无法播放。	-
11	使用参数有误，请检查播放器调用代码。	-
12	请填写视频播放地址。	-
13	直播已结束，请稍后再来。	RTMP 正常播放过程中触发事件（NetConnection.Connect.Closed）。 Flash 提示的错误。
1001	网络错误，请检查网络配置或者播放链接是否正确。	网络已断开（NetConnection.Connect.Closed）。 Flash 提示的错误。
1002	获取视频失败，请检查播放链接是否有效。	拉取播放文件失败（NetStream.Play.StreamNotFound），可能是服务器错误或者视频文件不存在。 Flash 提示的错误。
2032	获取视频失败，请检查播放链接是否有效。	Flash 提示的错误。
2048	无法加载视频文件，跨域访问被拒绝。	请求 M3U8 文件失败，可能是网络错误或者跨域问题。 Flash 提示的错误。

这里传入的url可以是直播地址，也可以是点播地址(就是直播过程中可以录播然后传回回放地址)。
isLive表示是不是直播，将决定是否渲染时间轴等控件，以及区分点直播的处理逻辑。直播的话就传true，如果是回放的话就传false。
autoplay这里并没有什么用处只是习惯性的写上了。
controls直播的时候不显示控件，回放的时候显示控件可以拖动进度条播放。

一般来说直播都是全屏播放，如果这个用参数列表中的width和height的话会出现机型适配问题，有些机型不会全屏播放，四周会有黑色区域，所以可以样式中添加如下代码：

video{
  object-fit: cover;
}

object-fill指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。有下面几个属性：

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

要注意的是现在对于视频的播放必须要用户手动触发

this.player.play()

因为时间比较急，暂时还没有想到替代方法，目前的做法是进来页面有个播放按钮遮罩，点击进行播放。