接入腾讯云超级播放器，实现直播源码网页播放

云豹直播源码是以直播为核心的社交系统，分别实现了移动端和网页端功能，那么基于网页的视频播放是怎样实现的呢？腾讯云点播超级播放器是基于HTML5 的 <video> 标签使用多种播放策略，来实现视频播放，实现了多平台播放效果的统一。

同时，直播源码结合腾讯云超级播放器和点播视频服务，实现防盗链和播放 HLS 加密视频等功能，目前市面上主流的浏览器都能很好的支持。

一、接入腾讯云超级播放器

1、技术人员可以在直播源码需要使用播放器的页面引入以下代码：

 
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.min.css" rel="stylesheet"/>
 
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
 
 <!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
 
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/TXLivePlayer-1.2.0.min.js"></script>
 
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
 
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js"></script>
 
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
 
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
 
 <!--播放器脚本文件-->
 
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script>

2、引入播放器的样式文件：

 
<link href="/tcplayer.min.css" rel="stylesheet"/>
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.m.js。-->
 
 <script src="/libs/hls.min.0.13.2m.js"></script>
 
 <!--播放器脚本文件-->
 
 <script src="/tcplayer.v4.3.0.min.js"></script>

3、在直播源码需要展示播放器的地方使用video标签：

<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>

4、初始化播放器对象

(1)调用初始化js代码，初始化播放器对象。

var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
 
player.src(url); // url 播放地址

(2)结合腾讯云点播来初始化播放器对象。

 
var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致
 
    fileID: '3701925921299637010', // 请传入需要播放的视频 fileID（必须）
appID: '1500005696' // 请传入点播账号的 appID（必须）
 
  //私有加密播放需填写 psign， psign 即超级播放器签名，签名介绍和生成方式参见链接：https://cloud.tencent.com/document/product/266/42436
 
  //psign:'eyJhbGci……',
});

开发人员可以在两者中选择一种方式进行初始化，实现直播源码的播放功能。如果您对直播源码开发感兴趣，请关注我们，有什么问题可以互相讨论。

声明：以上内容为云豹科技原创，未经作者本人同意，禁止转载，否则将追究相关法律责任www.yunbaokj.com