如何在 Html5 中添加全屏模式

Question

我想在下面的 html5 代碼中添加全屏模式建議我如何更改給定的代碼，我在此腳本中添加全屏代碼時遇到問題

 <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

Fullscreen API 添加了以全屏模式呈現特定元素（及其后代）的方法，並在不再需要時退出全屏模式。

嘗試 Element.requestFullscreen(options);