How To Add Full Screen Mode In A Html5

Question

I want to add fullscreen mode in below html5 code Suggest me how I can make changes in the given code, I am facing problem in adding the fullscreen code in this script

 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <video id="video"></video> <script> if(Hls.isSupported()) { var video = document.getElementById('video'); var hls = new Hls(); hls.loadSource('https://weblive.goonj.pk/dawnnewsweb_360p/index.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); } // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled. // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (ie .m3u8 URL) directly to the video element throught the `src` property. // This is using the built-in support of the plain video element, without using hls.js. else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'https://weblive.goonj.pk/dawnnewsweb_360p/index.m3u8'; video.addEventListener('canplay',function() { video.play(); }); } </script>

Answer 1

尝试制作一个带有脚本的按钮元素，该脚本在单击按钮时运行此代码

video.setFullScreenWindow()

Answer 2

The Fullscreen API adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed.

try Element.requestFullscreen(options);