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

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

0：landscape 横屏

1：portraint 竖屏

2：landscape | portrait 跟随手机自动旋转。

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

播放器实用事件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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控制）如下：

     
  1x 
 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)) =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; 

小结

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

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

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

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

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