223 lines
7.1 KiB
HTML
223 lines
7.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>Embed test</title>
|
|
|
|
<!--
|
|
include script for paid players
|
|
- jwplayer
|
|
- theoplayer
|
|
-->
|
|
|
|
<!--<script type='text/javascript' src='//cdn.theoplayer.com/latest/41718edc-cc2d-40d0-83d4-67c50c60f68f/theoplayer.loader.js'></script>-->
|
|
<!--<script src=players/jwplayer.js></script>
|
|
<script>jwplayer.key="2z0zTRsxD2HkL6m/LgDqvtUy2EThVn+gk1gN1Q==";</script>-->
|
|
|
|
<script>
|
|
// global options can be set here
|
|
var mistoptions = {
|
|
//host: 'http://cat.mistserver.org:8080'
|
|
host: 'http://thulmk3:8080'
|
|
//host: 'https://cat.mistserver.org:4433'
|
|
//host: 'http://localhost:8080'
|
|
//host: 'http://live.us.picarto.tv:8080'
|
|
//host: 'balderlaptop:8080'
|
|
};
|
|
</script>
|
|
|
|
<script src=core.js></script>
|
|
<!--<script src=wrappers/theoplayer.js></script>-->
|
|
<!--<script src=wrappers/jwplayer.js></script>-->
|
|
<script src=wrappers/html5.js></script>
|
|
<script src=wrappers/videojs.js></script>
|
|
<script src=wrappers/dashjs.js></script>
|
|
<script src=wrappers/flash_strobe.js></script>
|
|
<script src=wrappers/img.js></script>
|
|
<script src=wrappers/silverlight.js></script>
|
|
<script src=wrappers/polytrope.js></script>
|
|
|
|
<script src=players/dash.js></script>
|
|
<script src=players/videojs.js></script>
|
|
|
|
<link rel=stylesheet href=mist.css id=mist_player_css>
|
|
<style>
|
|
/* the website can override the css at will */
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
}
|
|
.mistvideo {
|
|
margin: 1px;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function mistinit(){
|
|
var logele = document.querySelector('.log');
|
|
var contele = document.querySelector('.cont');
|
|
document.addEventListener('error',function(e){
|
|
console.log('[Error] '+e.message,e.target);
|
|
var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message+' from '+e.target.outerHTML.slice(0,e.target.outerHTML.indexOf('>')+1));
|
|
var div = document.createElement('div');
|
|
div.appendChild(msg);
|
|
div.style.color = 'red';
|
|
logele.appendChild(div);
|
|
});
|
|
document.addEventListener('log',function(e){
|
|
console.log('[log] '+e.message);
|
|
return;
|
|
var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message);
|
|
var div = document.createElement('div');
|
|
div.appendChild(msg);
|
|
logele.appendChild(div);
|
|
});
|
|
|
|
//tryplayers = Object.keys(mistplayers);
|
|
tryplayers = [];
|
|
//tryplayers.push('automatic');
|
|
//tryplayers.push('html5');
|
|
tryplayers.push('dashjs');
|
|
//tryplayers.push('videojs');
|
|
tryplayers.push('img');
|
|
//tryplayers.push('dashjs');
|
|
//tryplayers.push('flash_strobe');
|
|
//tryplayers.push('silverlight');
|
|
streams = [];
|
|
//streams.push('live');
|
|
//streams.push('golive+emitan');
|
|
//streams.push('subtel');
|
|
//streams.push('ogg');
|
|
//streams.push('vids+mist.mp4');
|
|
//streams.push('vids+hahalol.mp3');
|
|
//streams.push('lama');
|
|
//streams.push('bunny');
|
|
streams.push('golive+SockyChannel');
|
|
|
|
for (var j in streams) {
|
|
for (var i in tryplayers) {
|
|
var d = document.createElement('div');
|
|
var c = document.createElement('div');
|
|
c.className = 'mistvideo';
|
|
c.title = tryplayers[i];
|
|
d.appendChild(c);
|
|
contele.appendChild(d);
|
|
var p = mistPlay(streams[j],{
|
|
target: c,
|
|
maxwidth: 800,
|
|
forcePlayer: tryplayers[i],
|
|
//forceType: 'html5/video/mp4',
|
|
//forceType: 'html5/audio/mp3',
|
|
//forceType: 'html5/application/vnd.apple.mpegurl',
|
|
//forceType: 'dash/video/mp4',
|
|
//forceSource: 3,
|
|
loop: true,
|
|
//controls: 'stock'
|
|
streaminfo: {
|
|
source: [{
|
|
type: 'html5/video/mp4',
|
|
url: 'http://localhost:8080/bunny.mp4'
|
|
},{
|
|
type: 'html5/application/vnd.apple.mpegurl',
|
|
url: 'http://localhost:8080/hls/bunny/index.m3u8'
|
|
},{
|
|
type: 'dash/video/mp4',
|
|
url: 'http://localhost:8080/dash/bunny/index.mpd'
|
|
},{
|
|
player_url: '/flashplayer.swf',
|
|
type: 'flash/10',
|
|
url: 'rtmp://localhost:1935/play/bunny'
|
|
}],
|
|
meta: {
|
|
tracks: []
|
|
},
|
|
height: 404,
|
|
width: 720,
|
|
type: 'vod'
|
|
},
|
|
callback: function(player) {
|
|
var button = document.createElement('button');
|
|
button.innerHTML = 'askNextCombo();';
|
|
button.onclick = function(){
|
|
player.askNextCombo('Button was clicked');
|
|
d.removeChild(this);
|
|
};
|
|
d.append(button);
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
/*
|
|
thumbnailing :')
|
|
document.addEventListener('initialized',function(e){
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = 180;
|
|
document.body.appendChild(canvas);
|
|
var context = canvas.getContext('2d');
|
|
var embedded;
|
|
for (var i in mistvideo) {
|
|
embedded = mistvideo[i].embedded[0];
|
|
break;
|
|
}
|
|
var video = embedded.player.element;
|
|
var f = video.width / canvas.width;
|
|
canvas.height = video.height / f;
|
|
video.addEventListener('canplay',function(){
|
|
context.drawImage(video,0,0,canvas.width,canvas.height);
|
|
var img = canvas.toDataURL('image/jpeg');
|
|
document.write('<img src="'+img+'">');
|
|
});
|
|
});
|
|
*/
|
|
</script>
|
|
|
|
</head>
|
|
<body onload=mistinit()>
|
|
<h1>Sup</h1>
|
|
<!--
|
|
<div class='mistvideo' id='bunny_84yt98eh9g8ht'>
|
|
<noscript>
|
|
<video controls autoplay>
|
|
<source src='http://localhost:8080/bunny.mp4' type='video/mp4'>
|
|
<a href='http://localhost:8080/bunny.html' target='_blank'>
|
|
Click here to play video
|
|
</a>
|
|
</video>
|
|
</noscript>
|
|
<script>
|
|
(function(){
|
|
var play = function(){
|
|
mistPlay('vids+subtel.mp4',{
|
|
//mistPlay('bunny',{
|
|
target: document.getElementById('bunny_84yt98eh9g8ht'),
|
|
//forcePlayer: 'dashjs'
|
|
});
|
|
}
|
|
if (!window.mistplayers) { //import shit
|
|
var p = document.createElement('script');
|
|
p.src = 'http://localhost:8080/player.js';
|
|
document.head.appendChild(p);
|
|
p.onload = function(){
|
|
play();
|
|
}
|
|
}
|
|
else {
|
|
play();
|
|
}
|
|
})();
|
|
</script>
|
|
</div>-->
|
|
<div class=cont></div>
|
|
<div class=log></div>
|
|
</body>
|
|
</html>
|