0

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

2 回答 2

0

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

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

于 2014-12-09T08:04:59.350 回答
0

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

我曾使用 jwplayer 来解决此问题。

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

于 2012-05-05T07:54:47.767 回答