适合所有人的视频 Modernizr 不起作用？
我有一个用 html5 编码的网页，使用 header、footer、section 和 video 等标签。 我使用 Modernizr 来支持 IE 7 和 IE 8 中的这些标签。
页面中有一个视频，包括 Flash Fallback（适合所有人的视频）。
当我在 IE 8 中测试页面时，页面呈现得很好，包括特定于 html5 的标签。
问题是视频的 Flash 回退不起作用。我有一个黑色区域而不是 Flash 播放器。
仅当我删除脚本标记以加载 Modernizr 时它才有效。如果我构建一个没有 html5 shim 的 Modernizr 自定义版本，Flash 播放器会加载并且我可以播放视频，但 html5 标签无法识别。
我怎样才能通过modernizr / html5 shim为每个人使用视频？ 为什么它不起作用？
感谢您的帮助
更新：
为了进一步详细说明，我的页面基于 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
仅当我注释加载现代化的行时，它才在 IE 8 中工作。
I have a webpage coded in html5 using tags like header, footer, section and video.
I use modernizr to support those tags in IE 7 and IE 8.
There's a video in the page including flash fallback (video for everybody).
When I test the page in IE 8, the page is well rendered, including tags specific to html5.
The problem is that the flash fallback for the video doesn't work. I have a black area instead of the flash player.
It works only if I remove the script tag to load modernizr. If I build a custom version of modernizr without html5 shim, the flash player loads and I can play the video, but html5 tags are not recognized.
How can I use video for everybody with modernizr / html5 shim ?
Why isn't it working?
Thanks for your help
Update :
To go further in details, my page is based on html5boilerplate and use mediaelementsjs for the player.
Here's the html code
<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>
And what is in 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']});
}
});
The plugins.js file contains the code of mediaelement-and-player.min.js
https://github.com/johndyer/mediaelement/blob/master/build/mediaelement-and-player.js
It works in IE 8 only if I comment the line to load modernizr.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您是否特别需要使用“Video for Every”？
我们将 http://mediaelementjs.com 与使用 HTML5 标记的页面结合使用，并使用 Modernizr，在所有操作系统上都没有问题/浏览器
Do you specifically need to use "Video for Everybody"?
We use http://mediaelementjs.com in conjunction with pages marked up with HTML5 and using Modernizr with no problems across all OS/Browsers
就我而言，我也怀疑过 Modernizr，但其实是 FitVids。在 MediaElement.js 已经发挥其魔力之后，FitVids 正在搞乱“嵌入”对象。
为了解决这个问题，我需要确保任何
jQuery().fitVids()发生过之前jQuery('video,audio').mediaelementplayer()< /代码>。In my case, I also suspected of modernizr but was FitVids. FitVids was messing with "embed" objects after
MediaElement.jshave already done its magic.To fix this, I needed to ensure that any
jQuery().fitVids()ever happened beforejQuery('video,audio').mediaelementplayer().如果您使用多个 javascript 库，请使用
jQuery.noConflict();If you're using multiple javascript libraries use
jQuery.noConflict();