<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'
      };
    </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/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('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');
        
        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'
              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>