腾讯云 Web 超级播放器开发实战

初九之潜龙勿用2024-06-01 17:05

目录

关于超级播放器

范例运行环境

开发前准备

设计与实现

初始化播放器

播放器重要属性设置

播放器实用事件

一些兼容性判断

浏览器支持

关于华为手机

实现代码

小结

关于超级播放器

腾讯云 Web 超级播放器 TCPlayer 可实现在手机浏览器和 PC 浏览器上播放音视频流的问题，功能强劲，兼容性好，可以不依赖用户安装 App，就能进行播放。

在实际的应用中，我们仍然根据需求直接改造了混淆代码，主要解决了以下问题：

1、增加、集成了播放快进组件

2、更改了一些样式

3、增强了一些旧版手机的兼容性

范例运行环境

操作系统： Windows Server 2019 DataCenter

.net版本： .netFramework4.0 或以上

开发工具：VS2019 C#

浏览器需要支持 H5 技术。

开发前准备

(1）我们需要引入腾讯云 Web 超级播放器的 JS 库，以下是我改造后的资源，可点击如下链接进行下载：

https://download.csdn.net/download/michaelline/89367455

(2）前端布局，下载我的资源后，假设放在当前应用目录下，首先我们需要引入样式单，如下代码：

<link rel="stylesheet" href="tcplayer2021.css" />

其次，引入核心库，如下代码：

javascript 复制代码 
 <script type="text/javascript" src="hls.min.0.12.4.js"> </script>
 <script type="text/javascript" src="tcplayer.v4.min.js"> </script>

（3）需要引入 Jquery，以下是一组基于Jquery的自定义开发的扩展应用库，请下载我的资源：

https://download.csdn.net/download/michaelline/88615565

进行引用，本库用于调用服务器静态方法等功能使用。

设计与实现

初始化播放器

播放器需要引入与结合 H5 的 Video 控件，假设有如下引用：

javascript 复制代码 
<div id="coplayer" style="box-shadow:2px 0px 35px  #000;  -webkit-box-shadow:2px 0px 35px  #000; background-color:rgb(69,69,69); position:fixed;top:40px;left:0px;width:80%;height:100px;  margin: 0px auto;">

  <video id="realcoplayer" autoplay="autoplay" controls="controls" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"  runat="server" ></video>
  <a id="b_rate" onclick="rate(this);" style=" float:right; line-height:25px; margin-right:10px; color:#fff;display:none;">1x</a> 

</div>

其中

1、coplayer 为外围容器层，控制一些样式和位置输出

2、realcoplayer 为 h5 video 控件，用于结合腾讯 web 超级播放器使用

其关键属性说明如下：

| 序号 | 属性与设置 | 说明 |
| 1 | autoplay="autoplay" | 设置是否自动播放，在移动端或IOS系统可能无法实现 |
| 2 | controls="controls" | 是否显示控制工具栏，这里设置为需要显示 |
| 3 | webkit-playsinline playsinline | 兼容性属性：webkit-playsinline使ios 10中设置可以让视频在小窗内播放，即不全屏播放。 playsinline 可使用IOS/微信浏览器支持小窗内播放 |
| 4 | x5-playsinline | H5 移动是否禁用全屏，这里为允许，为空则不允许 |

5 x-webkit-airplay="allow" 使此视频支持ios的AirPlay（隔空播放）功能，隔空播放能将各种 Apple 设备中的音乐流传输到家中的多个扬声器上,并让这些扬声器中播放的旋律始终保持合拍， 让音乐荡漾在每个房间。

3、b_rate 为用于改造及引入超级播放器的快进组件，配合其使用。

客户端播放器的初始化代码如下：

cs 复制代码 
var player = new TCPlayer('realcoplayer', { 
fileID: 111, 
appID: '125407', 
playbackRates: [0.5, 1, 1.25, 1.5, 2],
        autoplay: false,
        live: false,
        x5_player: true,
        volume: 0.5,
        flash: true,
        x5_player: true,
        systemFullscreen: false,
        playsinline: true,
        x5_orientation: 0,
        x5_type: 'h5',
        allowFullScreen: false,
        width:_w,
        height:_h,

});

播放器重要属性设置

在实际使用中，为保证良好的可用性和兼容性，还需要设置如下属性，说明见下表：

| 序号 | 参数 | 类型 | 说明 |
| 1 | fileID | string | 云点播平台可播放视频文件的 fileID |
| 2 | appID | string | 云点播平台申请的 appID |
| 3 | playbackRates | float[] | 快进倍速设置，如此数组 [0.5, 1, 1.25, 1.5, 2] |
| 4 | autoplay | bool | 是否设置为自动播放，false 为不自动 |
| 5 | live | bool | 是否直播功能，默认为 false |
| 6 | x5_player | bool | 设为 true 。是否启用 TBS 的播放 flv 或 hls 。启用时播放器将在 TBS 模式下(例如 Android 的微信、QQ 浏览器），将 flv 或 hls 播放地址直接赋给 <video> 播放。 |
| 7 | volume | float | 默认音量，0-1，0.5为居中 |
| 8 | flash | bool | 一个兼容的重要属性，设为 true |
| 9 | systemFullscreen | bool | 开启后(true)，在不支持 Fullscreen API 的浏览器环境下，尝试使用浏览器提供的 webkitEnterFullScreen 方法进行全屏，如果支持，将进入系统全屏，控件为系统控件 |
| 10 | playsinline | bool | 兼容性属性，设为 true |
| 11 | x5_orientation | int | 通过 video 属性 "x5-video-orientation" 声明 TBS 播放器支持的方向，可选值： 0：landscape 横屏 1：portraint 竖屏 2：landscape &verbar; portrait 跟随手机自动旋转。 (备注：该属性为 TBS 内核实验性属性，非 TBS 内核不支持) |
| 12 | x5_type | string | 通过 video 属性 "x5-video-player-type" 声明启用同层 H5 播放器，支持的值：h5-page (该属性为 TBS 内核实验性属性，非 TBS 内核不支持) |
| 13 | allowFullScreen | bool | 兼容性写法，是否允许全屏播放 |
| 14 | width | int | 设置播放器宽度，单位为像素。 |

15 height int 设置播放器高度，单位为像素。

播放器实用事件

通过跟踪超级播放器提供的监听事件，实现我们的开发需求，其关键事件说明如下：

| 序号 | 事件 | 说明 |
| 1 | timeupdate | 播放时间更新事件，可记录播放时间，其结构体如下: player.on('timeupdate',function(){ }) |
| 2 | play | 开始播放时事件，其结构体如下： player.on('play',function(){ }) |
| 3 | fullscreenchange | 切换全屏状态事件，其结构体如下： player.on('fullscreenchange',function(){ }) |
| 4 | seeked | 拖动播放进度结束事件，其结构体如下： player.on('seeked',function(){ }) |
| 5 | pause | 播放暂停时事件，其结构体如下： player.on('pause',function(){ }) |
| 6 | ended | 播放结束时事件，其结构体如下： player.on('ended',function(){ }) |
| 7 | canplay | 播放能力执行成功事件，其结构体如下： player.on('canplay',function(){ }) |
| 8 | loadeddata | 音视频数据加载完毕时事件，其结构体如下： player.on('loadeddata',function(){ }) |

9 ratechange 改变快进倍速完成时事件，其结构体如下： player.on('ratechange',function(){ })

类实现代码如下：

cs 复制代码 
public class QR_LIMIT_STR_SCENE
{
            public string AccessToken { get; set; }
            public string ticket { get; set; }
            public string url { get; set; }
            public string ResultJson = "";
            public QR_LIMIT_STR_SCENE()
            {
            }
            public string getUrl(string scene_str)
            {
                string PostJson = "{\"action_name\": \"QR_LIMIT_STR_SCENE\", \"action_info\": {\"scene\": {\"scene_str\": \"" + scene_str + "\"}}}";
                String action = "https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=" + AccessToken;
                WebService ws = new WebService();
                string rs = ws.GetResponseResult(action, Encoding.UTF8, "POST", PostJson);
                Newtonsoft.Json.Linq.JObject jsonObj = Newtonsoft.Json.Linq.JObject.Parse(rs);
                ticket = jsonObj["ticket"] != null ? jsonObj["ticket"].ToString() : "";
                url = jsonObj["url"] != null ? jsonObj["url"].ToString() : "";
                ResultJson = rs;
                return "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + ticket;

            }
}

一些兼容性判断

浏览器支持

编写浏览器是否支持终端H5播放的判断，实现代码如下：

javascript 复制代码 
        function checkVideo() {
            if (!!document.createElement('video').canPlayType) {
                var vidTest = document.createElement("video");
                oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
                if (!oggTest) {
                    h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
                    if (!h264Test) {
                        return false;
                    }
                    else {
                        if (h264Test == "probably") {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                }
                else {
                    if (oggTest == "probably") {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
            }
            else {
                return false;
            }
            return true;
        }
        if (!checkVideo()) {
            alert('您的浏览器不支持Video播放，请使用支持H5技术的浏览器！');
        }
关于华为手机

在某些华为手机我们发现倍速快进组件样式显示异常，因此引入 JS 函数，对机型增加了一些判断 ，代码如下：

javascript 复制代码 
    function judgeBrand(sUserAgent) {
       var isIphone = sUserAgent.match(/iphone/i) == "iphone";
       var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
       var isHonor = sUserAgent.match(/honor/i) == "honor";
       var isOppo = sUserAgent.match(/oppo/i) == "oppo";
       var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
       var isVivo = sUserAgent.match(/vivo/i) == "vivo";
       var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
       var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
       var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
       var isSamsung = sUserAgent.match(/sm-/i) == "sm-";

       if (isIphone) {
           return 'iphone';
       } else if (isHuawei || isHonor) {
           return 'huawei';
       } else if (isOppo || isOppoR15) {
           return 'oppo';
       } else if (isVivo) {
           return 'vivo';
       } else if (isXiaomi || isRedmi || isXiaomi2s) {
           return 'xiaomi';
       } else if (isSamsung) {
           return 'samsung';
       } else {
           return 'default';
       }
   }

对华为手机的判断处理代码如下：

javascript 复制代码 
if(judgeBrand(navigator.userAgent.toLowerCase())=='huawei'){
            $("#b_rate").html="1x";
            $("#b_rate").css("display","");
        }else{
            $("#b_rate").css("display","none");
        }

实现代码

相对完整的实现代码（包括样式引入、前端控件和JS控制）如下：

javascript 复制代码 
<link rel="stylesheet" href="tcplayer2021.css" />
    <asp:TextBox ID="x_roomid" checkSchema="" runat="server" style="display:none"></asp:TextBox>
 <script type="text/javascript" src="hls.min.0.12.4.js"> </script>
 <script type="text/javascript" src="tcplayer.v4.min.js"> </script>
<script type="text/javascript" language="javascript" src="jquery.js" ></script>

<div id="h5panel" runat="server" >
<asp:TextBox ID="x_fileid" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="current" Text="0" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="duration" Text="0" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="mname" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_mp4url" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_CoverUrl" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_playMark" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="x_lasttime" style="display:none;" runat="server"></asp:TextBox>
<asp:TextBox ID="confirmflag" Text="0" runat="server" style="display:none;" ></asp:TextBox>
<asp:TextBox ID="playMarkflag" Text="0" runat="server" style="display:none;" ></asp:TextBox>
<asp:TextBox ID="x_videocount" Text="0" style="display:none;" runat="server"></asp:TextBox>

<div id="coplayer" style="box-shadow:2px 0px 35px  #000;  -webkit-box-shadow:2px 0px 35px  #000; background-color:rgb(69,69,69); position:fixed;top:40px;left:0px;width:80%;height:100px;  margin: 0px auto;">
                <video id="realcoplayer" autoplay="autoplay" controls="controls" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"  runat="server" ></video>
                <a id="b_rate" onclick="rate(this);" style=" float:right; line-height:25px; margin-right:10px; color:#fff;display:none;">1x</a> 
</div>

<script language="javascript">
       var windowheight=$(window).height();
        form = document.forms[0];

        function checkVideo() {
            if (!!document.createElement('video').canPlayType) {
                var vidTest = document.createElement("video");
                oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
                if (!oggTest) {
                    h264Test = vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
                    if (!h264Test) {
                        return false;
                    }
                    else {
                        if (h264Test == "probably") {
                            return true;
                        }
                        else {
                            return false;
                        }
                    }
                }
                else {
                    if (oggTest == "probably") {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
            }
            else {
                return false;
            }
            return true;
        }
        if (!checkVideo()) {
            alert('您的浏览器不支持Video播放，请使用支持H5技术的浏览器！');
        }    

    var timer=null;
    var curtime=0;
    function stimer(){ 
        timer=window.setInterval("setpmark()",1000);
    }
    function etimer(){
        window.clearInterval(timer);
    }

        function secondToDate(result) {
        var h = Math.floor(result / 3600) < 10 ? '0'+Math.floor(result / 3600) : Math.floor(result / 3600);
        var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
        var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
        if(h=="00"){
        return result = m + ":" + s;
        }else{
        return result = h + ":" + m + ":" + s;
        }
    }
        var _w = $(document).width();
        if(_w>=1200){
            _w=640;
        }
        _h=_w/16*9;
        
    function resizeAll(){
        var _w = $(document).width();
        if(_w>=1200){
            _w=640;
        }
        _h=_w/16*9;
        if(player.isFullscreen()==true){
        }
        document.getElementById('coplayer').style.left=($(document).width()-_w)/2+'px';
        document.getElementById('coplayer').style.width=_w+'px';
        document.getElementById('coplayer').style.height=_h+'px';

    function aiplaymark(curtime){
        player.currentTime(curtime);
        player.play();
    }

    var debug=document.getElementById('debug');
    var curtime=0;
    var seeked=false;

    var player = new TCPlayer('realcoplayer', { fileID: document.getElementById('x_fileid').value, appID: '12540',
 playbackRates: [0.5, 1, 1.25, 1.5, 2],
        autoplay: false,
        live: false,
        x5_player: true,
        volume: 0.5,
        flash: true,
        x5_player: true,
        systemFullscreen: false,
        playsinline: true,
        x5_orientation: 0,
        x5_type: 'h5',
        allowFullScreen: false,
        width:_w,
        height:_h,

});

    player.on('timeupdate',function(){ 
        document.getElementById("current").value=player.currentTime();
    })
    player.on('play',function(){
        stimer();
        updcountinfo('play',0);
    })
    player.on('fullscreenchange',function(){
    })

    player.on('seeked',function(){
    })
    player.on('pause',function(){
        etimer();
    })
    player.on('ended',function(){
        etimer();
    })
    player.on('canplay',function(){
    })
    player.on('loadeddata',function(){
        player.poster(document.getElementById('x_CoverUrl').value);
        if(judgeBrand(navigator.userAgent.toLowerCase())=='huawei'){
            $("#b_rate").html="1x";
            $("#b_rate").css("display","");
        }else{
            $("#b_rate").css("display","none");
        }
          this.currentTime(document.getElementById("current").value);
    })
    
    player.on('ratechange',function(){
        $('#b_rate').html($('.vjs-playback-rate-value').html());
    })
    function rate(o) {         
        document.querySelectorAll('.vjs-playback-rate')[1].click();
    }
    
    function judgeBrand(sUserAgent) {
       var isIphone = sUserAgent.match(/iphone/i) == "iphone";
       var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
       var isHonor = sUserAgent.match(/honor/i) == "honor";
       var isOppo = sUserAgent.match(/oppo/i) == "oppo";
       var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
       var isVivo = sUserAgent.match(/vivo/i) == "vivo";
       var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
       var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
       var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
       var isSamsung = sUserAgent.match(/sm-/i) == "sm-";

       if (isIphone) {
           return 'iphone';
       } else if (isHuawei || isHonor) {
           return 'huawei';
       } else if (isOppo || isOppoR15) {
           return 'oppo';
       } else if (isVivo) {
           return 'vivo';
       } else if (isXiaomi || isRedmi || isXiaomi2s) {
           return 'xiaomi';
       } else if (isSamsung) {
           return 'samsung';
       } else {
           return 'default';
       }
   }
    function updcountinfo(ctype,counts){
         if(ctype=='play'){
             if(document.getElementById('x_videocount').value=='0'){
                document.getElementById('x_videocount').value='1';
             }else{
                return;
             }
         }
         callServerFunction("", "updateCountInfo","{cid:'"+$("#x_cid").val()+"',ctype:'"+ctype+"',counts:'"+counts+"'}", sscount);
    }

    function setpmark(){
         curtime++;
         callServerFunction("", "updatePersonLearnInfo","{cid:'"+$("#x_cid").val()+"',uid:'"+$("#x_uid").val()+"',pid:'"+$("#x_pid").val()+"',playmark:'"+$('#current').val()+"',steptime:'1'}", ss);
    }
  
var sTime;
     
</script>

小结

（1）关于更多的超级播放器 SDK 开发介绍，请参照如下链接：

https://cloud.tencent.com/document/product/881/30818

（2）实现代码中事件代码仅供参考，对于服务器静态方法实现需要根据我们实际的应用需求进行开发。

（3）实现代码中的前端控件，只为演示实例使用，可根据需要改造符合自己的开发规范。

感谢您的阅读，希望本文能够对您有所帮助。

相关推荐
狸克先生2 分钟前
如何用AI写小说(二)：Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_384241095 分钟前
在有网络连接的机器上打包 electron 及其依赖项，在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap17 分钟前
百度世界2024精选公开课：基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish25 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull28 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
dessler29 分钟前
云计算&虚拟化-kvm-扩缩容cpu
linux·运维·云计算
学Linux的语莫34 分钟前
Ansible Playbook剧本用法
linux·服务器·云计算·ansible
请叫我欧皇i37 分钟前
html本地离线引入vant和vue2（详细步骤）
开发语言·前端·javascript
533_39 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿