让html 5视频在全屏模式下自动打开

Get html 5 video to automatically open in fullscreen mode

本文关键字：模式 html 视频      更新时间：2023-11-28

我成功地使用HTML5视频标签和jQuery在全屏模式下打开了一个视频，以响应事件（点击、按键）。如何让视频在页面加载时全屏打开，而不是点击？如有任何帮助，我们将不胜感激。非常感谢！

我的HTML:

    <div id="video_container>
       <video id="video1" width="1280" height="720" controls autoplay>
          <source src="videos/ballet.mp4" type="video/mp4">
          <source src="videos/ballet.webm" type="video/webm">
          <source src="videos/ballet.ogv" type="video/ogg">
       </video>
    </div>

我的JavaScript:

$(document).ready(function(){     
      $('#video1').bind("playing", function(){
        var elem = document.getElementById("video1");
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        }
      });
      $('#video1').bind("ended", function(){ 
        $("#video_container").hide();
      });
 });

听起来你无法在页面加载时实现视频全屏，至少对于webkit浏览器来说是这样。根据Safari开发者库：

webkitEnterFullscreen（）方法只能在响应用户操作，例如单击按钮。您不能调用例如，webkitEnterFullscreen（）响应加载事件。

全文如下：https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

相关文章：