IE8及以下完美支持video/audio且兼容所有浏览器的解决方案

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/weixin_44198965/article/details/89714708

IE8及更低版本支持解决方案

借助html5media,此JavaScript类库不借助依赖任何框架,非常的实用,体积非常小。
使用后,判断当浏览器不支持video/audio时,将自动切换为Flash模式,并使用Flowplayer播放器。

IE条件注释,浏览器自动判断,在IE9以下自动引入html5media.min.js
注意:我记得这个压缩版的可能会有一些问题,如果条件允许,请使用非压缩版(不带min)。

<!--[if lt IE 9]>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
<![endif]-->

兼容所有浏览器解决方案

先来看一组数据,来自W3C:
由于时间紧直接复制的有点乱,所以地址在下面:
URL:http://www.w3school.com.cn/html5/html_5_video.asp

当前,video 元素支持三种视频格式:
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

我们所要知道的,就是一句话:
当前video元素支持三种视频格式,且每种视频编码格式的文件在各大浏览器内核中支持格式不同,所以我们需要解决它。

我们可以看到,三种视频格式的文件,至少被一种内核所支持。
因此,我们把三种格式全部放入,让浏览器自己来选择。

为什么要解决这个兼容所有浏览器的问题?
假如,我在给客户做网站,客户要求网站上放视频,并且嘱咐说:该视频非常重要,一定要让所有用户都看到!
如果站在非程序员的角度,或许只认识一种视频格式:*.mp4,并不夸张。
那么当客户发来后,你不可能拒绝,并让客户去更改视频格式,这时我们就可以使用格式工厂这个强大软件来进行相应的转码及更改视频编码,已完成我们需要的格式。
在这里插入图片描述
使用方法相信不需要去刻意说它,完成视频格式问题后,我们进行下一步。

假如我们准备好了三个格式:

Trailer.ogg

Trailer.mpeg

Trailer.webm

然后让这个Trailer宣传片视频在任意浏览器打开都能正常播放它

<!-- 同audio -->
<video controls="controls">
    <source src="Trailer.ogg" type="video/ogg">
    <source src="Trailer.mpeg" type="video/mpeg">
    <source src="Trailer.webm" type="video/webm"> 
    ...
</video>

出于对用户的友好,必要时加入一句话,当特殊情况,所有格式浏览器均不识别时,给予最后的友好。

Your browser does not support the audio/video element.
您的浏览器不支持音频/视频元素.
...

audio/video大同小异,遇到问题随机应变,便是解决方案。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/89714708