首页 文章

在iPad / iPhone上使用HTML5视频全屏

提问于
浏览
8

我正在试图通过JavaScript在iPad / iPhone上全屏播放HTML5视频元素,但是当我尝试使用videoElement.webkitEnterFullScreen()时,我看到了一个INVALID_STATE_ERR:Dom Exception 11 .

我的Code

对于Example

现在,看起来在这里添加了对this behavior的特定支持:

这特别是在没有用户手势的情况下防止全屏显示 .

My question:

这有解决方法吗?

我看到Vimeo的HTML5视频播放器在某种程度上模仿了这种行为here(在iPad / iPhone上)

所以,似乎有可能 . 我错过了什么吗?

2 回答

  • 5

    在iOS模拟器Ipad上测试

    希望我能帮助别人:

    <html>
    <head>
     <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
     <script type="text/javascript">
        var vid;
    
        function init() {
            vid = document.getElementById("myVideo");
            vid.addEventListener("loadedmetadata", goFullscreen, false); 
        }
    
        function goFullscreen() {
            vid.webkitEnterFullscreen();
        }
    
        $(document).ready(function(){
            init();
    
            $("#myVideo").bind('ended', function(){
                $('#myVideo')[0].webkitExitFullScreen();
            });
        });
     </script>
    </head>
    <body>
        <h1>Fullscreen Video</h1>
        <video src="movie.mp4" id="myVideo" autoplay controls >
        </video>
    </body>
    </html>
    
  • 0

    我用过这个,它对我有用

    - (void) makeHTML5VideoFullscreen {
        if(webView) {
            [webView stringByEvaluatingJavaScriptFromString: @"document.querySelector('video').webkitEnterFullscreen();"];
        }
    }
    

相关问题