Question

我的网页使用header，footer，section和video等标签以html5编码。我使用modernizr来支持IE 7和IE 8中的那些标签。

页面中有一个视频，包括flash fallback（每个人的视频）。

当我在IE 8中测试页面时，页面渲染得很好，包括特定于html5的标签。

问题是视频的闪回后备不起作用。我有一个黑色区域而不是flash播放器。

仅当我删除脚本标记以加载modernizr时才有效。如果我构建一个没有html5垫片的自定义版本的modernizr，flash播放器会加载，我可以播放视频，但是html5标签无法识别。

如何使用modernizr / html5垫片为每个人使用视频？为什么不起作用？

感谢您的帮助

更新：

为了进一步详细说明，我的页面基于html5boilerplate并为播放器使用mediaelementsjs。

这是html代码

<head>
...
<script src="js/libs/modernizr-2.0.6.min.js"></script>
...
</head>

<body>

...

<video width="332" height="250" poster="img/poster.jpg" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
    <source type="video/mp4" src="video/myvideo.mp4" />
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
    <source type="video/webm" src="video/myvideo.webm" />
        <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
        <object width="332" height="250" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
                <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
                <param name="allowFullScreen" value="true">
                <param name="wmode" value="transparent">
                <param name="flashVars" value="config={'playlist':['http://.../img/poster.jpg',{'url':'http://.../video/myvideo.mp4','autoPlay':false}]}">
        <!-- Image as a last resort -->
        <img src="img/poster.jpg" width="320" height="240" title="Your browser doesn't support video" />
        </object>
    </video>

...

<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>

</body>

以及script.js中的内容

$(function() {

if($.browser.msie && $.browser.version.substr(0,1)<=7) {
    // $("video, audio").mediaelementplayer({defaultVideoWidth: 332,defaultVideoHeight: 250, features: ['playpause','progress','current','duration','volume','fullscreen']});
    }
    else {
    // initialize scrollable
        $(".scrollable").scrollable({circular: true, mousewheel: true}).navigator();
        $("video, audio").mediaelementplayer({defaultVideoWidth: 332,defaultVideoHeight: 250, features: ['playpause','progress','current','duration','volume','fullscreen']});
    }
});

plugins.js文件包含mediaelement-and-player.min.js的代码 https://github.com/johndyer/mediaelement/blob/master/build/mediaelement-and-player.js

仅当我评论该行以加载modernizr时，它才能在IE 8中运行。

Answer 1

您是否特别需要使用“为所有人提供视频”？

我们将http://mediaelementjs.com与标记为HTML5的页面结合使用，并使用Modernizr在所有操作系统/浏览器中没有问题

Answer 2

如果您使用多个JavaScript库，请使用jQuery.noConflict();

Answer 3

就我而言，我也怀疑是现代人，但是FitVids。在MediaElement.js已经完成其魔法之后，FitVids正在搞乱“嵌入”物体。

要解决此问题，我需要确保在 jQuery().fitVids()之前发生任何jQuery('video,audio').mediaelementplayer() 。

视频适合所有有现代化工作的人吗？

3 个答案: