在iPad / iPhone上使用HTML5視頻全屏

Question

我正在試圖通過JavaScript在iPad / iPhone上全屏播放HTML5視頻元素，但是當我嘗試使用videoElement.webkitEnterFullScreen（）時，我看到了一個INVALID_STATE_ERR：Dom Exception 11。

我的守則

對於示例

現在，看起來在這里添加了對此行為的特定支持：

這特別是在沒有用戶手勢的情況下防止全屏顯示。

我的問題：

這有解決方法嗎？

我看到Vimeo的HTML5視頻播放器模仿了這種行為，就像在這里看到的那樣（在iPad / iPhone上）

所以，似乎有可能。 我錯過了什么嗎？

Answer 1

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

Answer 2

我用過這個，它對我有用

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