前言

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

所用技术

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

页面构建

在index.html引入初始化脚本

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

页面中放置容器

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

播放器

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

// 初始化播放器
init(url, isLive) {
    this.player = new TcPlayer(

前言

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

所用技术

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

页面构建

在index.html引入初始化脚本

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

页面中放置容器

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

播放器

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

// 初始化播放器
init(url, isLive) {
    this.player = new TcPlayer(