chimee-player
Version:
A complete set of H5 player
153 lines (142 loc) • 4.23 kB
HTML
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>直播FLV清晰度切换测试</title>
<style type="text/css">
body{ background: #ccc;}
.chimee-container{
position: relative;
max-width: 800px;
margin: 10px 0;
}
h2{
border-bottom: solid 1px #ccc;
}
h2 a{
text-decoration: none;
background: #aeaeae;
color: #ddd;
padding: 10px 20px;
border-radius: 5px 5px 0 0;
}
h2 a.on{
color: #333;
background: #eee;
}
p{
padding: 0;
margin:0;
}
label{
font-size: 12px;
color: #333;
}
</style>
</head>
<body>
<h2>
<a href="?">HLS直播测试</a>
<a href="?flv">FLV直播测试</a>
</h2>
<button id="rebuild">重建播放器(destroy掉已有window.player实例，再重新构造)</button>
<div class="chimee-container">
<video tabindex="-1"></video>
</div>
<!-- <p>
<input type="button" id="_duration" value="设置chimee.silentLoad的duration为10秒" title="流质量较差时设置，也可以控制台改window.__duration">
</p> -->
<p style="text-align: right; max-width:800px;">
在控制条中选择“雪域”“水镇”“山盟”，动态切流。
</p>
<script src="../lib/chimee-player.browser.js" type="text/javascript"></script>
<script src="https://s.ssl.qhres.com/static/af3c1d4b462cc178/jquery.js" ></script>
<script>
/* $('#disabled_reload').change(function(){
console.log(window.__disabled_reload = this.checked);
});
$('#_duration').click(function(){
console.log(window.__duration = 1e4);
});*/
var needFlv = location.href.indexOf('flv')!==-1;
$('h2 a').eq(+needFlv).addClass('on');
// 取个SD的直播流来用用
function getSDLiveUrl(sn){
var a = 've3.ji', b = '60.c';
return $.ajax({
url: 'https://li'+ a +'a.3'+ b +'n/public/getInfoAndPlayV2?from=mpc_ipcam_web&sn=36'+ sn +'&taskid='+ +new Date(),
type:'get',
dataType:'jsonp'
}).then(function(data){
var liveHLS = data && data.playInfo && data.playInfo.hls;
var ret = {};
if(liveHLS){
if(needFlv) liveHLS = liveHLS.replace('hls-live', 'flv-live').replace('/index.m3u8','.flv');
ret.url = liveHLS;
ret.poster = data.publicInfo.thumbnail;
}
return ret;
});
}
function start(){
Promise.all([
getSDLiveUrl('072753627'),
getSDLiveUrl('0K0905701'),
getSDLiveUrl('0K0902816')
]).then(function(re){
if(!re[0].url || !re[1].url || !re[2].url){
alert('流地址异常');
}
rebuildPlayer(re[0].url, re[1].url, re[2].url);
})
}
// alert(11);
function rebuildPlayer(snow, water, city){
window.player && !window.player.destroyed && window.player.destroy();
window.player = new ChimeePlayer({
wrapper: '.chimee-container',
src: snow,
box:needFlv?'flv':'hls',
isLive: true,
autoplay: true,
controls: true,
//stashSize: 1024*64,
plugin: [
{
"name": "chimeeControl",
"children": {
play:{}, progressTime:false, progressBar:false, volume:{}, screen:{},
"clarity": {
duration:30,
"list": [{
"name": "雪域",
"src": snow
},
{
"name": "水镇",
"src": water
},
{
"name": "山盟",
"src": city
}]
}
}
}
]
});
player.on('ended',function(){
console.warn('ended~');
});
player.on('canplaythrough',function(){
console.warn('[main-test] canplaythrough~');
});
player.on('error',function(err){
console.warn('[main-test] player.error:', err);
})
}
$('#rebuild').click(start);
// 自动开始
start();
</script>
</body></html>