ie8 中的 Video.js 闪存回退没有控件？答案

【问题标题】：Video.js flash fallback in ie8 no controls?ie8 中的 Video.js 闪存回退没有控件？
【发布时间】：2013-03-08 16:26:11
【问题描述】：

我最近开始在 html5 中构建，玩弄 video.js。

我的视频可以在除 ie8 之外的所有浏览器中运行。

ie8中的问题是视频播放但没有控件。

请在下面查看我的代码：-

    <!doctype html>
<!--[if IE 8]><html class="ie8" dir="ltr" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" dir="ltr" lang="en"><![endif]-->
<!--[if gt IE 9]><!--> <html dir="ltr" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Storm Creative" />

        <title>Ventrica <?php echo $title; ?></title>

        <script src="<?php echo DIRECTORY; ?>assets/scripts/utils/modernizr.min.js"></script>
        <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
        <script src="http://vjs.zencdn.net/c/video.js"></script>
        <?php foreach ( $stylesheets as $style ): ?>
            <link rel="stylesheet" href="<?php echo $style; ?>" />
        <?php endforeach; ?>

    </head>
    <body>
        <div class="header_img"></div>
        <div class="wrapper">
            <?php include "assets/includes/navigation.php"; flush(); ?>


<div class="video_section">
    <div class="mac">
    <div class="screen"></div>
        <video autoplay="" controls="" loop="" width="310" height="185" class="mac_player video-js vjs-default-skin" id="js-video"  preload="auto" data-setup='{"techOrder": ["html5", "flash"]}'>          <source src="assets/video/large.webm" type='video/webm; codecs="vp8, vorbis"' />
            <source src="assets/video/large.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            <source src="assets/video/large.ogv" type='video/ogg; codecs="theora, vorbis"' />
            <object id="flash_fallback_1" class="vjs-flash-fallback" width="310" height="185">
                <embed width="310" height="185" src="assets/video/large.swf" type="application/x-shockwave-flash" wmode="transparent"></embed>
            </object>
        </video>
    </div>
    <div class="see_team">
        <h3 class="hidetxt">See Our team in action...</h3>
        <p><b>Watch our video and see our team in action to learn more about our multilingual services, quality assurance and training.</b></p>
        <p>If you are looking for a company to help manage your customer communication then you will want to partner with a contact centre that inspires trust, demonstrates credibility and has already been chosen by numerous “Blue Chip” companies to handle their customer contact...</p>
        <a href="">Choose Ventrica</a>
    </div>
</div>
<script>
    var myPlayer = _V_('js-video');
    _V_("js-video").ready(function(){
        myPlayer.volume(0);
    var onFullScreen = function(){
      if (this.isFullScreen) {
        this.volume(1);
        myPlayer.currentTime(0);
      } else {
        this.volume(0);
      }
    };
    myPlayer.addEvent("fullscreenchange", onFullScreen);
});
</script>

有人遇到过这个问题吗？

谢谢。

【问题讨论】：

标签： video.js

【解决方案1】：

我发现了这个帖子和一些类似的帖子......没有一个解决方案对我有用。

最终我发现了问题（至少在我的情况下），这涉及到 IE8 在 IE7 模式下无法处理 :before。解决方案在这里： https://stackoverflow.com/a/22645786/2895604

【讨论】：

【解决方案2】：

我刚刚看到我们有一个相关的帖子。我也有同样的问题，我认为它是基于 CSS 的。

不确定我是否应该删除我的帖子或以某种方式将其标记为重复？在这里：

Video.js CSS Styling Broken in < IE9 - [A.K.A. Controls Hidden]

【讨论】：

flash 后备应该是一个 .mp4 这就是我的修复