mistserver/embed/test.html
2016-12-28 16:25:22 +01:00

177 lines
5.4 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: 'https://cat.mistserver.org:4433'
host: 'http://localhost: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/dashjs.js></script>
<script src=wrappers/videojs.js></script>
<script src=wrappers/flash_strobe.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);
},true);
document.addEventListener('log',function(e){
console.log('[log] '+e.message)
var msg = document.createTextNode('['+(new Date()).toTimeString().split(' ')[0]+'] '+e.message);
var div = document.createElement('div');
div.appendChild(msg);
logele.appendChild(div);
},true);
//tryplayers = Object.keys(mistplayers);
tryplayers = [];
//tryplayers.push('html5');
//tryplayers.push('dashjs');
tryplayers.push('videojs');
//tryplayers.push('flash_strobe');
//tryplayers.push('silverlight');
streams = [];
//streams.push('live');
//streams.push('subtel');
streams.push('ogg');
//streams.push('vids+mist.mp4');
//streams.push('lama');
//streams.push('bunny');
for (var j in streams) {
for (var i in tryplayers) {
var c = document.createElement('div');
c.className = 'mistvideo';
c.title = tryplayers[i];
contele.appendChild(c);
mistPlay(streams[j],{
target: c,
maxwidth: 800,
forcePlayer: tryplayers[i],
//forceType: 'html5/video/mp4',
//forceType: 'html5/application/vnd.apple.mpegurl',
//forceType: 'dash/video/mp4',
//forceSource: 5,
loop: true,
//controls: 'stock'
});
}
}
};
/*
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>