自动全屏iframe视频,无需使用任何API

时间:2015-09-28 12:49:34

标签: javascript jquery iframe fullscreen

是否可以使用任何api"自动全屏显示iframe视频。我已经尝试过youtube api它工作得很好。但我需要知道是否有可能。请给我解释一下演示。谢谢。

或任何其他方法/黑客来实现此解决方案。

2 个答案:

答案 0 :(得分:1)

有一个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>元素的全屏模式,您需要在allowFullScreen上设置iframe:

<iframe src="iframe.html" width="100" height="100" allowFullScreen></iframe>

答案 1 :(得分:1)

您可以使用Html5功能,使用视频标记

<video width="321" height="244" controls>
<source src="folder/movie.mp4" type="video/mp4">
<source src="folder/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

或者您可以使用iframe。

<iframe src="folder/movie.mp4" width="550" height="380"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>