我最近开始在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>
有人有这个问题吗?
感谢。
答案 0 :(得分:1)
我找到了这个帖子和一些类似的帖子......没有一个解决方案适合我。
最终我弄清了问题(至少在我的情况下),这涉及IE8在IE7模式下无法处理:before
。解决方案在这里:
https://stackoverflow.com/a/22645786/2895604
答案 1 :(得分:0)
我刚才看到我们有相关的帖子。我也有同样的问题,我认为它是基于CSS的。
不知道我是否应删除我的帖子或以某种方式将其标记为重复?在这里:
Video.js CSS Styling Broken in < IE9 - [A.K.A. Controls Hidden]