获取html 5视频以全屏模式自动打开

问题描述 投票:0回答:1

我成功地使用HTML 5视频标签和jQuery以全屏模式打开视频以响应事件(点击,按键)。如何在页面加载时以全屏模式打开视频而不是onclick?任何帮助,将不胜感激。非常感谢!

我的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();
      });
 });
javascript jquery html5 video html5-video
1个回答
4
投票

听起来你不能在页面加载时使视频全屏,至少不适用于webkit浏览器。根据Safari开发者库:

只能在响应用户操作(例如单击按钮)时调用webkitEnterFullscreen()方法。例如,您无法调用webkitEnterFullscreen()来响应加载事件。

全文在这里:https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

© www.soinside.com 2019 - 2024. All rights reserved.