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

ecu*_*ver 8 javascript iphone fullscreen ipad

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

我的守则

对于示例

现在,看起来在这里添加了对此行为的特定支持:

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

我的问题:

这有解决方法吗?

我看到Vimeo的HTML5视频播放器模仿了这种行为,就像在这里看到的那样 (在iPad/iPhone上)

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

小智 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>
Run Code Online (Sandbox Code Playgroud)

  • 您知道,有更好的方法可以在此处发布代码.http://stackoverflow.com/editing-help (2认同)