H5 video标签视频加载存在的问题

客户发现上传的视频无法播放，然后主管让我解决这个问题，这个页面不是我负责的，我看了代码，发现视频用的h5标签video标签加载视频。我看了没问题，然后

我先用ie浏览器打开，视频加载没问题。然后我给主管说没问题啊，主管说他也不知道，让我再看看，肯定有问题。然后我让旁边的同事打开，旁边的同事说无法播放。

我看了一下，他原来用的是谷歌浏览器，我才知道video标签原来存在浏览器兼容问题。

我百度了一下，找到了解决办法：

1 <video controls="controls" width="500px" height="300px" preload="metadata">
2             //火狐
3             <source src="video/FF4.ogv" type="video/ogg">
4             //谷歌
5             <source src="video/FF4.webm" type="video/webm">
6             //ie
7             <source src="video/FF4.mp4" type="video/mp4">
8         </video>

这样就解决兼容问题。

如果还不行加一下这个兼容插件：

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

但是又有一个新问题出现，ie浏览器会显示三个视频，一个可以播放，另外两个无法播放。

所以这会就要判断用户用的是哪个浏览器了。

 1 function isBrowser() {
 2     var userAgent = navigator.userAgent;
 3     //微信内置浏览器
 4     if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') {
 5         return "MicroMessenger";
 6     }
 7     //QQ内置浏览器
 8     else if(userAgent.match(/QQ/i) == 'QQ') {
 9         return "QQ";
10     }
11     //Chrome
12     else if(userAgent.match(/Chrome/i) == 'Chrome') {
13         return "Chrome";
14     }
15     //Opera
16     else if(userAgent.match(/Opera/i) == 'Opera') {
17         return "Opera";
18     }
19     //Firefox
20     else if(userAgent.match(/Firefox/i) == 'Firefox') {
21         return "Firefox";
22     }
23     //Safari
24     else if(userAgent.match(/Safari/i) == 'Safari') {
25         return "Safari";
26     }
27     //IE
28     else if(!!window.ActiveXObject || "ActiveXObject" in window) {
29         return "IE";
30     }
31     else {
32         return "未定义:"+userAgent;
33     }
34 }

在对应的浏览器下播放对应的视频格式就行了。

H5 video标签视频加载存在的问题

相关推荐