mutedVideoPage.html (1518B)
1 <!doctype html> 2 <!-- This Source Code Form is subject to the terms of the Mozilla Public 3 - License, v. 2.0. If a copy of the MPL was not distributed with this 4 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 5 <html> 6 <head> 7 <title>Muted_Video_Test_Page</title> 8 </head> 9 <body> 10 <p id="testContent">Page content: muted video player</p> 11 <div class="playbackState"> 12 <p>Media file not playing</p> 13 </div> 14 <div id="video-container" style="text-align: center"> 15 <button onclick="play()">Play</button> 16 <button onclick="pause()">Pause</button> 17 <button onclick="fullscreen()">Full Screen</button> 18 <br /><br /> 19 <video id="mutedVideo" width="420" autoplay muted controls loop> 20 <source src="../resources/clip.mp4" type="video/mp4" /> 21 Your browser does not support HTML video. 22 </video> 23 </div> 24 25 <script> 26 const mutedVideo = document.getElementById("mutedVideo"); 27 28 function play() { 29 mutedVideo.play(); 30 } 31 32 function pause() { 33 mutedVideo.pause(); 34 } 35 36 function fullscreen() { 37 mutedVideo.requestFullscreen(); 38 } 39 40 mutedVideo.addEventListener("playing", _event => { 41 document.querySelector(".playbackState").innerHTML = 42 "Media file is playing"; 43 }); 44 45 mutedVideo.addEventListener("pause", _event => { 46 document.querySelector(".playbackState").innerHTML = 47 "Media file is paused"; 48 }); 49 </script> 50 </body> 51 </html>