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

前端 0

目录

关于超级播放器

范例运行环境

开发前准备

设计与实现

初始化播放器

播放器重要属性设置

播放器实用事件

 一些兼容性判断

浏览器支持

关于华为手机

 实现代码

小结

关于超级播放器

腾讯云 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" />

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

 <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 控件，假设有如下引用：

<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 超级播放器使用

其关键属性说明如下：

序号属性与设置说明
1autoplay="autoplay" 设置是否自动播放，在移动端或IOS系统可能无法实现
2controls="controls"是否显示控制工具栏，这里设置为需要显示
3webkit-playsinline playsinline

兼容性属性：webkit-playsinline使ios 10中设置可以让视频在小窗内播放，即不全屏播放。  playsinline 可使用IOS/微信浏览器支持小窗内播放

4x5-playsinlineH5 移动是否禁用全屏，这里为允许，为空则不允许
5x-webkit-airplay="allow"使此视频支持ios的AirPlay（隔空播放）功能，隔空播放能将各种 Apple 设备中的音乐流传输到家中的多个扬声器上,并让这些扬声器中播放的旋律始终保持合拍， 让音乐荡漾在每个房间。

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

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

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,});

播放器重要属性设置

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

序号参数类型说明
1fileID string云点播平台可播放视频文件的 fileID
2appIDstring云点播平台申请的 appID
3playbackRatesfloat[]快进倍速设置，如此数组 [0.5, 1, 1.25, 1.5, 2]
4autoplaybool是否设置为自动播放，false 为不自动
5livebool是否直播功能，默认为 false
6x5_playerbool设为 true 。是否启用 TBS 的播放 flv 或 hls 。启用时播放器将在 TBS 模式下(例如 Android 的微信、QQ 浏览器），将 flv 或 hls 播放地址直接赋给 <video> 播放。
7volumefloat默认音量，0-1，0.5为居中
8flashbool一个兼容的重要属性，设为 true
9systemFullscreenbool开启后(true)，在不支持 Fullscreen API 的浏览器环境下，尝试使用浏览器提供的 webkitEnterFullScreen 方法进行全屏，如果支持，将进入系统全屏，控件为系统控件
10playsinlinebool兼容性属性，设为 true
11x5_orientationint

通过 video 属性 “x5-video-orientation” 声明 TBS 播放器支持的方向，可选值：

0：landscape 横屏

1：portraint 竖屏

2：landscape &verbar; portrait 跟随手机自动旋转。

(备注：该属性为 TBS 内核实验性属性，非 TBS 内核不支持)

12x5_typestring通过 video 属性 “x5-video-player-type” 声明启用同层 H5 播放器，支持的值：h5-page (该属性为 TBS 内核实验性属性，非 TBS 内核不支持)
13allowFullScreenbool兼容性写法，是否允许全屏播放
14widthint设置播放器宽度，单位为像素。
15heightint设置播放器高度，单位为像素。

播放器实用事件

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

序号事件说明
1timeupdate

播放时间更新事件，可记录播放时间，其结构体如下:

player.on('timeupdate',function(){  }) 

2play

开始播放时事件，其结构体如下：

player.on('play',function(){ })

3fullscreenchange

切换全屏状态事件，其结构体如下：

player.on('fullscreenchange',function(){    })

4seeked

拖动播放进度结束事件，其结构体如下：

player.on('seeked',function(){    })

5pause

播放暂停时事件，其结构体如下：

player.on('pause',function(){    })

6ended

播放结束时事件，其结构体如下：

player.on('ended',function(){    })

7canplay

播放能力执行成功事件，其结构体如下：

player.on('canplay',function(){    })

8loadeddata

音视频数据加载完毕时事件，其结构体如下：

player.on('loadeddata',function(){    })

9ratechange

改变快进倍速完成时事件，其结构体如下：

player.on('ratechange',function(){    })

类实现代码如下：

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播放的判断，实现代码如下：

        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 函数，对机型增加了一些判断 ，代码如下：

    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';       }   }

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

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

 实现代码

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

<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）实现代码中的前端控件，只为演示实例使用，可根据需要改造符合自己的开发规范。

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

也许您对下面的内容还感兴趣：