server player

4 years ago · 801300fa60
1 changed files with 24 additions and 24 deletions
--- a/aplayer.html
+++ b/aplayer.html
@ -3,24 +3,24 @@
                <link rel="stylesheet" type="text/css" href="/player/asciinema-player.css" />
        </head>
        <body onLoad="GetVideo()">
-
-		<asciinema-player id="p1" title="Linux" author="swarmlab.io" author-url="http://www.swarmlab.io" font-size="small" speed="2" theme="monokai"></asciinema-player>
                <script src="/player/asciinema-player.js"></script>
                <script>
+                        let render = (relEl, tpl, parse = true) => {
+                                  if (!relEl) return;
+                                  const range = document.createRange();
+                                  range.selectNode(relEl);
+                                  const child = range.createContextualFragment(tpl);
+                                  return parse ? relEl.appendChild(child) : {relEl, el};
+                        };
                function GetVideo() {
-			//document.querySelector("#p1").setAttribute("src", src);
-			document.getElementById('p1').addEventListener('loadeddata', function(e) {
                        var url_string = window.location.href
                        var url = new URL(url_string);
                        var item = url.searchParams.get("item");
                        var llo = url.searchParams.get("llo");
                        var src = '/player/'+llo+'/'+item+'.cast'
-
-			var video = document.getElementById('p1');
-			video.setAttribute('src', src);
-				document.getElementById('p1').play()
-				  console.log("all ready to play");
-			})
+                        render(document.body, `
+                                <asciinema-player title="Linux" author="swarmlab.io" author-url="http://www.swarmlab.io" font-size="small" speed="2" theme="monokai" src=${src}></asciinema-player>
+                                `);
                }