file_playback_and_bfcache.html (1789B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script> 5 function init() { 6 if (location.search == "") { 7 let bc1 = new BroadcastChannel("bc1"); 8 bc1.onmessage = function(e) { 9 if (e.data == "loadNext") { 10 location.href = location.href + "?page2"; 11 } else if (e.data == "forward") { 12 bc1.close(); 13 history.forward(); 14 } 15 }; 16 window.onpageshow = function() { 17 bc1.postMessage("pageshow"); 18 }; 19 } else { 20 document.body.innerHTML = "<video controls src='owl.mp3' autoplay>"; 21 let bc2 = new BroadcastChannel("bc2"); 22 bc2.onmessage = function(e) { 23 if (e.data == "back") { 24 history.back(); 25 } else if (e.data == "statistics") { 26 bc2.postMessage({ currentTime: document.body.firstChild.currentTime, 27 duration: document.body.firstChild.duration }); 28 bc2.close(); 29 window.close(); 30 } 31 } 32 window.onpageshow = function(e) { 33 bc2.postMessage({ event: "pageshow", persisted: e.persisted}); 34 if (!e.persisted) { 35 // The initial statistics is sent once we know the duration and 36 // have loaded all the data. 37 let mediaElement = document.body.firstChild; 38 mediaElement.onpause = function() { 39 mediaElement.onpause = null; 40 mediaElement.currentTime = 0; 41 mediaElement.onplay = function() { 42 setTimeout(function() { 43 bc2.postMessage({ currentTime: mediaElement.currentTime, 44 duration: mediaElement.duration }); 45 }, 500); 46 } 47 mediaElement.play(); 48 } 49 } 50 }; 51 } 52 } 53 </script> 54 </head> 55 <body onload="init()"> 56 </body> 57 </html>