如何在 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);