<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>播放器例子</title>
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-tap-highlight" content="no">
<style>
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="video-container" style="margin: 0px auto;">
</div>
<!--[if lt IE 9]>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-shim.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/libs/es5-sham.js"></script>
<![endif]-->
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer.js"></script>
<script>
(function(){
function getParams(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
var rtmp = getParams('rtmp'),
flv = getParams('flv'),
m3u8 = getParams('m3u8'),
mp4 = getParams('mp4'),
live = (getParams('live') == 'true' ? true : false),
coverpic = getParams('coverpic'),
width = getParams('width'),
height = getParams('height'),
autoplay = (getParams('autoplay') == 'true' ? true : false);
/**
* 视频类型播放优先级
* mobile :m3u8>mp4
* PC :RTMP>flv>m3u8>mp4
*/
var options = {
rtmp: rtmp,
flv: flv ,
m3u8: m3u8 ,
mp4 : mp4 || 'rtmp://192.168.30.212/mypull/test', //
coverpic: coverpic ,
autoplay: autoplay ? true : false,
live: live,
width : width || '480',
height : height || '320',
wording: {
2032: '请求视频失败,请检查网络',
2048: '请求m3u8文件失败,可能是网络错误或者跨域问题'
},
listener: function (msg) {
//console.log(msg.type);
}
};
var player = new TcPlayer('video-container', options);
console.log(player);
})();
</script>
</body>
</html><!--[if !IE]>|xGv00|4ceb2c54152fcb3fd413ec6673baecd1<![endif]-->
转载于:https://blog.51cto.com/niubdada/1898137