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

发布来源:云豹科技
发布人:云豹科技
2022-06-23 10:01:55

云豹直播源码是以直播为核心的社交系统,分别实现了移动端和网页端功能,那么基于网页的视频播放是怎样实现的呢?腾讯云点播超级播放器是基于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

声明:
以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任
立即查看