2

我对我正在从事的这个项目的痛苦结局感到沮丧，哈哈。我正在使用 Video.js 创建网站，该网站将成为用户上传比赛视频的网站。

我正在使用 twitter bootstrap，我从 PSD 创建了一个响应式设计，它在所有真实的浏览器（ff、safari、chrome 等）中看起来都很棒。它甚至在 IE7、IE9 和 IE10 中看起来都相当不错。但是，由于某种原因，它在 IE8 中完全崩溃了。

我正在使用 jquery 脚本来强制 16x9 纵横比，这就是问题所在。IE8 完全忽略了它，而且 html5 视频元素上没有宽度或高度，所以它完全吓坏了浏览器。

有任何想法吗？最终我试图只拥有响应宽度和 16x9 的高度比。我使用的脚本非常适合它，但我必须能够支持 IE8。不关心7。

这是该网站的实时预览，它使用的是 codeigniter 框架，但这并不重要......

现场预览

这是我的页面代码...

<!DOCTYPE html>
<html>
<head>
<title>Cover Song Contests | Rendition Battle</title>
<meta name="description" content="RenditionBattle.com offers cash prizes for cover song contests.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->
<link href="http://localhost:8888/renditionbattle/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://localhost:8888/renditionbattle/css/main.css" rel="stylesheet" media="screen">
<link href="http://localhost:8888/renditionbattle/css/responsive.css" rel="stylesheet" media="screen">

<!-- Video.js in head for older IE -->
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>

    <!-- Sticky Footer Wrapper -->
    <div class="heightWrapper">

        <!-- Login Header -->
        <div class="loginHeader">
            <div class="container">
                <div class="pull-right register">
                    <a href="#" class="btn btn-small btn-inverse">Signup</a> <a href="#">Sign Up</a> | <a href="#">Register</a>
                </div>
            </div>
        </div>
        <!-- End Login Header -->

        <!-- Logo and Navigation -->
        <div class="container header">
            <div class="logo pull-left"><a href="#"><img src="http://localhost:8888/renditionbattle/img/logo.png" alt="Rendition Battle" /></a></div>
            <ul class="mainnav pull-right">
                <li><a href="#">Home</a></li>
                <li><a href="#">Latest Battle</a></li>
                <li><a href="#">Vote Now</a></li>
                <li><a href="#">Request a Contest</a></li>
                <li><a href="#">FAQ's</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <div class="btn-group mobilenav">
                <a class="btn dropdown-toggle btn-inverse" data-toggle="dropdown" href="#">Menu <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Latest Battle</a></li>
                    <li><a href="#">Vote Now</a></li>
                    <li><a href="#">Request a Contest</a></li>
                    <li><a href="#">FAQ's</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="stripes"></div>
        <!-- End Logo and Navigation -->        
        <!-- Battle Leader Section -->
        <div class="background">
            <div class="container">
                <p class="tagline">sign up. upload your rendition of the contest's song. win money.</p>
                <div class="battleLeader">
                    <div id="battleVideo">
                        <div class="battleTag"></div>
                        <video id="battle" class="video-js vjs-default-skin" width="500" height="300" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'>
                          <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
                          <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
                        </video>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Battle Leader Section -->

        <!-- Upload Now -->
        <div class="uploadNow">
            <div class="container">
                <div class="row">
                    <div class="span9 acEntries">
                        <h4>CURRENT CONTEST ACCEPTING ENTRIES UNTIL MARCH 30, 2013</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
                    </div>
                    <div class="span3"><a href="#" class="btn btn-block btn-large btn-info">Upload Now <i class="icon-share-alt icon-white"></i></a></div>
                </div>
            </div>
        </div>
        <!-- End Upload Now -->

        <!-- Featured Member and Comments-->
        <div class="featuredMember">
            <div class="container">
                <div class="row">

                    <!-- Latest Comments -->
                    <div class="span6 latestComments">
                        <div class="comment">
                            <div class="lcContent">
                                <div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
                                <div class="lcDate">Jan 7th, 2013</div>
                                <div class="lcComment">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                                </div>
                                <div class="lcMore">
                                    <a href="#" class="btn btn-small">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="comment">
                            <div class="lcContent">
                                <div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
                                <div class="lcDate">Jan 7th, 2013</div>
                                <div class="lcComment">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                                </div>
                                <div class="lcMore">
                                    <a href="#" class="btn btn-small">View Profile</a>
                                </div>
                            </div>
                        </div>

                        <div class="comment">
                            <div class="lcContent">
                                <div class="lcAvatar"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder" /></div>
                                <div class="lcDate">Jan 7th, 2013</div>
                                <div class="lcComment">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                                </div>
                                <div class="lcMore">
                                    <a href="#" class="btn btn-small">View Profile</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Latest Member -->
                    <div class="span6 latestMember">
                        <h3>Current Contest Leader</h3>
                        <p class="lmp">ShockForce75's rendition of Carly Rae Jaspen's: Call Me Maybe</p>
                        <div class="latestvid">
                            <video id="lvid" class="video-js vjs-default-skin" controls preload="auto" poster="my_video_poster.png" data-setup='{"techOrder": ["html5", "flash"]}'>
                              <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
                              <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
                            </video>
                        </div>
                        <div class="lvidComment">
                            <div class="lvidCommentTail"><img src="http://localhost:8888/renditionbattle/img/lc.png" alt="latest comment" /></div>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Featured Member -->

        <!-- Previous Members -->
        <div class="pwHeader">
            <div class="container">
                <h4>Previous Winners</h4>
            </div>
        </div>
        <div class="pw">
            <div class="container">
                <div class="row">
                    <div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
                    <div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
                    <div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
                    <div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
                    <div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
                    <div class="span2 pwMember"><img src="http://localhost:8888/renditionbattle/img/placeholder.jpg" alt="placeholder username" /></div>
                </div>
            </div>
        </div>
        <!-- End Previous Members -->       <div class="push"></div>
    </div>
    <!-- End Sticky Footer Wrapper -->

    <!-- Footer -->
    <div class="footer">
        <div class="container">
            <div class="pull-left">
                <p>Copright &copy; 2013 RenditionBattle.com. All Rights Reserved.<br />
                <a href="http://422studios.com" target="_blank">Dallas Web Development</a> by 422 Studios, LLC</p>
            </div>
            <div class="pull-right">
                <a href="#"><img src="http://localhost:8888/renditionbattle/img/icon-twitter.png" alt="twitter" /></a> 
                <a href="#"><img src="http://localhost:8888/renditionbattle/img/icon-fb.png" alt="facebook" /></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- End Footer -->

    <!-- JS -->
    <input type="hidden" id="siteUrl" value="http://localhost:8888/" />
    <input type="hidden" id="baseUrl" value="http://localhost:8888/" />
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://localhost:8888/renditionbattle/js/bootstrap.min.js"></script>
    <script src="http://localhost:8888/renditionbattle/js/respond.min.js"></script>
    <script src="http://localhost:8888/renditionbattle/js/main.js"></script>
    <script src="http://localhost:8888/renditionbattle/js/aspectratio.js"></script>

</body>
</html>

这是我的纵横比的 JS ......

//Battle video aspect ratio
// Once the video is ready
$(document).ready(function() {
      _V_("battle").ready(function(){

        var myPlayer = this;    // Store the video object
        var aspectRatio = 9/16; // Make up an aspect ratio

        function resizeVideoJS(){
          // Get the parent element's actual width
          var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
          // Set width to fill parent element, Set height
          myPlayer.width(width).height( width * aspectRatio );
        }

        resizeVideoJS(); // Initialize the function
        window.onresize = resizeVideoJS; // Call the function on resize
    });

    //Latest video aspect ratio
    // Once the video is ready
      _V_("lvid").ready(function(){

        var myPlayer = this;    // Store the video object
        var aspectRatio = 9/16; // Make up an aspect ratio

        function resizeVideoJS(){
          // Get the parent element's actual width
          var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
          // Set width to fill parent element, Set height
          myPlayer.width(width).height( width * aspectRatio );
        }

        resizeVideoJS(); // Initialize the function
        window.onresize = resizeVideoJS; // Call the function on resize
    });
});

关于如何修改我的代码以使其工作的任何想法？如果有人知道我可以用来实现我的终极目标的东西，我愿意在需要时完全更换解决方案。

此外，如果它们是 IE8，我确实尝试了所有我能找到并想到的重定向到http://www.422clients.com/page/upgrade但它只会永远加载并最终在 ie8 上给我一个奇怪的连接错误页面。

4

2 回答 2

2

ie8 不支持 video 标签，ie7 也不支持 - 不知道你是如何让它在那里工作的。

证明：http ://caniuse.com/#feat=video

您将需要使用 Flash 替代品，或放弃 ie8 的视频，或放弃 ie8 支持。您可以使用的一个好的库是https://github.com/zencoder/video-js

于 2013-04-17T06:37:56.470 回答
0

无论如何，当您使用 jQuery 时，请使用它的 resize() 方法，因为它似乎在 IE8 上更可靠地工作。

此外，根据API Docs ， size() 比 height() 和 width() 更有效。

function resizeVideoJS(){
  // Get the parent element's actual width
  var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
  // Set width to fill parent element, Set height
  myPlayer.size(width,Math.floor(width*aspectRatio));
}

resizeVideoJS();
$(window).resize(resizeVideoJS);
于 2013-04-18T12:12:25.307 回答