HTML 5 视频在 Ipad 上不起作用，并且 ipad 布局的侧面有黑色部分答案

【问题标题】：HTML 5 Video not working on Ipad and ipad layout has black portions on the sideHTML 5 视频在 Ipad 上不起作用，并且 ipad 布局的侧面有黑色部分
【发布时间】：2012-05-05 01:47:20
【问题描述】：

我被困在一个 HTML 5 项目中，视频在 Chrome 和 Safari PC 浏览器上运行，但在 iPad 上却不行。要求是仅在纵向模式下工作，当点击/点击视频时，视频将播放。

<!doctype html>
<!--[if lt IE e 7]>    <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">  <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en">         <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en">                <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en">                       <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Page 1</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0"   />
        <style>
            #container{
                width:768px;
                margin:150px auto;
                position: relative;
            }
            #container video {
                position:relative;    
                z-index:0;
            }
            .overlay {
                position:absolute;
                top:170px;
                left:380px;
                z-index:1;
            }
        </style>

        <script>
            function play(){
                var video = document.getElementById('video');
                video.addEventListener('click',function(){
                    video.play();
                },false);
            }
    </script>

        <script>
            $(document).ready(function () {
                function reorient(e) {
                    var portrait = (window.orientation % 180 == 0);
                    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" :       "");
                }
                window.onorientationchange = reorient;
                window.setTimeout(reorient, 0);
            });
        </script>
    </head>
    <body>
        <div id="container">
            <video id="video" width="770" height="882" onclick="play();">
                <source src="video/Motionv4-1.m4v" />
            </video>
            <div class="overlay">
                <div style="color:#356AFA; text-align:center; font-weight:bold; font-size:45px; line-height:60px; font-family:arial">
                    Tap the <br /> DoughBoy<br />to Join<br /> JavaWorld<br /> Wi-Fi!
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript css ipad html html5-video

【解决方案1】：

我在从事此类项目时遇到了同样的问题。

我已经使用 jwplayer 来解决这个问题。

http://www.longtailvideo.com/players/jw-flv-player/

【讨论】：

【解决方案2】：

iPad 有一个错误，它只查看提供的第一个 mime 时间，因此您需要先添加 .mp4 文件，然后它才会起作用。

更多信息在这里。 http://diveintohtml5.info/video.html

【讨论】：