videoPage.html (1528B)
1 <html> 2 <head> 3 <title>Video_Test_Page</title> 4 </head> 5 <body> 6 <p id="testContent">Page content: video player</p> 7 <div class="playbackState"></div> 8 <div id="video-container" style="text-align: center"> 9 <button onclick="play()">Play</button> 10 <button onclick="pause()">Pause</button> 11 <button onclick="fullscreen()">Full Screen</button> 12 <br /><br /> 13 <video id="video" width="420" autoplay controls loop> 14 <source src="resources/clip.mp4" type="video/mp4" /> 15 Your browser does not support HTML video. 16 </video> 17 </div> 18 19 <script> 20 const video = document.getElementById("video"); 21 22 function play() { 23 video.play(); 24 } 25 26 function pause() { 27 video.pause(); 28 } 29 30 function fullscreen() { 31 video.requestFullscreen(); 32 } 33 34 var showPlayingAlert = true; 35 36 video.addEventListener("playing", _event => { 37 <!-- document.querySelector('.playbackState').innerHTML="Media file is playing";--> 38 <!-- Need this hack to verify that the video is playing, --> 39 <!-- the test cannot currently verify the text displayed on the page--> 40 if (showPlayingAlert === true) { 41 showPlayingAlert = false; 42 alert("Media file is playing"); 43 } 44 }); 45 46 video.addEventListener("pause", _event => { 47 // document.querySelector('.playbackState').innerHTML="Media file is paused"; 48 alert("Media file is paused"); 49 }); 50 </script> 51 </body> 52 </html>