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

目录

关于超级播放器

范例运行环境

开发前准备

设计与实现

初始化播放器

播放器重要属性设置

播放器实用事件

 一些兼容性判断

浏览器支持

关于华为手机

 实现代码

小结

---

关于超级播放器

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

其关键属性说明如下：

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

播放器重要属性设置

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

播放器实用事件

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

类实现代码如下：

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

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