HTML5中video和audio的跨浏览器兼容

不清楚html标签或者css属性的兼容性，可以在网站https://caniuse.com中查询

想要做好video和audio的兼容，需要做好以下几点：

1、做好浏览器不兼容时显示的图片、或者文字

例如：

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

2、source：不同浏览器支持的视频格式不一样，因此要提前准备好多格式视频文件

1）例如：（其中poster表示在加载视频内容前显示的图片）

<video width="320" height="240" autoplay>
  　　<source src="movie.mp4" type="video/mp4" poster="img/封面.jpg">
  　　<source src="movie.ogg" type="video/ogg" poster="img/封面.jpg">
</video>

2）浏览器能播放哪种格式的视频？各个浏览器不同，有专利格式的，有开源格式的。

具体支持情况如下：

专利格式mp4：Safari（iPad、Windows、Mac OS）、Chrome、IE9+

开源格式webm：Firefox4+、Chrome6+、Opera10.6+

开源格式ogg：Firefox3.5+、Chrome3+、Opera10.5+

视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用。推荐一个国外的工具(需要FQ)http://www.online-convert.com 。甚至不用安装软件，直接选择相应的目标格式，然后上传视频，配置一下参数就可以转换出来了。没有合适工具的朋友，可以尝试一下。

3、老旧浏览器做兼容

1. 我们可以把视频上传到优酷、土豆或者爱奇艺等国内著名视频服务商，直接调用视频代码
2. 在老旧版本的浏览器上使用flash视频文件
3. head部分引用 <script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
4. html5media是一个让video、audio标签在旧版IE中全面兼容的JavaScript类库，它不依赖于任何JavaScript框架。页面使用了html5media之后，当老版本的浏览器不支持HTML5时，它将会自动切换成Flash模式的flowplayer播放器尝试播放。。
5. 使用VideoJS插件实现兼容 http://videojs.com

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">  
<script src="http://vjs.zencdn.net/c/video.js"></script> 

<!–[if lt IE 9]>   
    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>   
<![endif]–>  

4、使用JS做一些兼容工作
示例：HTML

 <div class="music" id="waves">
      <ul class="movement">
        <li class="li1"><span class="ani-li"></span></li>
        <li class="li2"><span class="ani-li"></span></li>
        <li class="li3"><span class="ani-li"></span></li>
        <li class="li4"><span class="ani-li"></span></li>
        <li class="li5"><span class="ani-li"></span></li>
        <li class="li6"><span class="ani-li"></span></li>
      </ul>
      <audio id="music-player" src="images/media/music.mp3" loop="loop" autoplay="autoplay"></audio>
    </div>

 

CSS：

扫描二维码关注公众号，回复： 1013054 查看本文章

.music{width:20px;height:15px;top:30px;right:74px;position:absolute;cursor:pointer}
.movement{width:20px;height:15px}
.movement li{position:relative;float:left;height:100%;width:2px;overflow:hidden;margin-right:1px}
.movement li span{position:absolute;bottom:0;display:block;width:2px;background:#fff}
.movement .li1 span{animation:waves .6s linear 0s infinite alternate;-webkit-animation:waves .6s linear 0s infinite alternate}
.movement .li2 span{animation:waves .9s linear 0s infinite alternate;-webkit-animation:waves .9s linear 0s infinite alternate}
.movement .li3 span{animation:waves 1s linear 0s infinite alternate;-webkit-animation:waves 1s linear 0s infinite alternate}
.movement .li4 span{animation:waves .8s linear 0s infinite alternate;-webkit-animation:waves .8s linear 0s infinite alternate}
.movement .li5 span{animation:waves .7s linear 0s infinite alternate;-webkit-animation:waves .7s linear 0s infinite alternate}
.movement .li6 span{animation:waves .5s linear 0s infinite alternate;-webkit-animation:waves .5s linear 0s infinite alternate}
.movement.sta-pause li span{
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
@-webkit-keyframes waves{10%{height:20%}
  20%{height:60%}
  40%{height:40%}
  50%{height:100%}
  100%{height:50%}
}
@keyframes waves{10%{height:20%}
  20%{height:60%}
  40%{height:40%}
  50%{height:100%}
  100%{height:50%}
}

js代码：

$(function(){
  if($.browser.msie){
    if($.browser.version<9){
      $('#waves').hide();
    }
  };
  $('#waves').on('click',playMusic);
});
function playMusic() {
  var player = $('#music-player')[0];
    if (player.paused){
      player.play();
      $('#waves .movement').removeClass('sta-pause');
    }else {
      player.pause();
      $('#waves .movement').addClass('sta-pause');
    }
}