如何打开全屏视频

How to Open Fullscreen video?

本文关键字：视频 何打开      更新时间：2023-09-26

我使视频的互动与几个按钮链接到几个元素，但这些元素是最好的全屏显示，所以我正在寻找一个解决方案来整合一个代码(如果可能的话)，这样当我点击我的网站上的视频，视频将自动全屏。这可能吗?

<div style="position: relative; padding-bottom: 56.25%; "><iframe style="position: absolute; top: 0; left: 0;" frameborder="0" allowfullscreen scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" height="100%" src="https://playfilmstorage.blob.core.windows.net/media/published/398548bd-4bc9-42cf-ab5e-bd6a922afbf0/index.html?autoplay=false"></iframe></div>

试试这个:
有一个使用javascript的解决方案。它适用于Mozilla和Webkit浏览器。

可以使用element.mozRequestFullScreen();和element.webkitRequestFullScreen();

的例子:

function goFullscreen(id) {
    var element = document.getElementById(id);
    if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
   }
}

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Fullscreen</button>

要允许<iframe>元素的全屏模式，您需要将iframe设置为allowFullScreen:

<iframe src="iframe.html" width="100" height="100" allowFullScreen></iframe>
相关文章：