Question

我被困在一个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>

Answer 1

我在处理这类项目时面临同样的问题。

我曾使用jwplayer解决这个问题。

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

Answer 2

好的iPad有一个错误，它只查看提供的第一个哑剧时间，因此您需要先添加.mp4文件，然后才能使用。

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

HTML 5视频无法在Ipad和ipad布局上工作，侧面有黑色部分

2 个答案: