腾讯云 Web 超级播放器开发实战 - ToB企服应用市场:ToB评测及商务社交产业平台

<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>

复制代码

<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>

复制代码

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

复制代码

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技术的浏览器！');
}

复制代码

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

复制代码

<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>

复制代码