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

Question

I'm trying to play and go fullscreen for an HTML5 video element on an iPad/iPhone via JavaScript, but when I try videoElement.webkitEnterFullScreen(), I see an INVALID_STATE_ERR: Dom Exception 11. 我正在试图通过JavaScript在iPad / iPhone上全屏播放HTML5视频元素，但是当我尝试使用videoElement.webkitEnterFullScreen（）时，我看到了一个INVALID_STATE_ERR：Dom Exception 11。

My Code 我的守则

For Example 对于示例

Now, it looks like specific support for this behavior was added here: 现在，看起来在这里添加了对此行为的特定支持：

which specifically prevents going fullscreen without a user gesture. 这特别是在没有用户手势的情况下防止全屏显示。

My question: 我的问题：

Is there a workaround for this? 这有解决方法吗？

I see that Vimeo's HTML5 video player is mimicking this behavior somehow as seen here (on iPad/iPhone) 我看到Vimeo的HTML5视频播放器模仿了这种行为，就像在这里看到的那样（在iPad / iPhone上）

So, it seems it is possible. 所以，似乎有可能。 Am I missing something? 我错过了什么吗？

Answer 1

Testing on iOS simulator Ipad 在iOS模拟器Ipad上测试

Hope I can help someone: 希望我能帮助别人：

<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>

Answer 2

I used this and it worked for me 我用过这个，它对我有用

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

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

问题描述

2 个解决方案

解决方案1
5 2012-08-21 06:40:19

解决方案2
1 2015-09-28 10:56:36

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

问题描述

2 个解决方案

解决方案1 5 2012-08-21 06:40:19

解决方案2 1 2015-09-28 10:56:36

解决方案1
5 2012-08-21 06:40:19

解决方案2
1 2015-09-28 10:56:36