如何在 Html5 中添加全屏模式答案

【问题标题】：How To Add Full Screen Mode In A Html5如何在 Html5 中添加全屏模式
【发布时间】：2019-03-10 06:14:57
【问题描述】：

我想在下面的 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 (i.e. .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>

【问题讨论】：

没有先生的代码已经写了，但我不知道输入全屏模式代码的顺序
请关闭大写锁定 - 被认为是大喊大叫且难以阅读。为什么标记为java（代码：myDevice.setFullScreenWindow(myWindow);）？检查help center
好的，关闭，我标记了 java，因为它与 java..var 脚本有关，这就是为什么..
感谢您的代码，但要在哪里添加它才能使其正常工作
Is there a way to make HTML5 video fullscreen?的可能重复

标签： javascript html

【解决方案1】：

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

video.setFullScreenWindow()

【讨论】：

【解决方案2】：

全屏 API 添加了在全屏模式下呈现特定元素（及其后代）的方法，并在不再需要时退出全屏模式。

试试 Element.requestFullscreen(options);

【讨论】：