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

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

相关推荐
k09331 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135823 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning23 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人33 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00134 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
不秃头的UI设计师1 小时前
UI界面设计入门：打造卓越用户体验
ui·ux·ui设计
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解