前端教程：浏览器不兼容嵌入的音视频文件怎么办？

虽然HTML5支持ogg、mpeg4和webm的视频格式以及ogg、mp3和wav的音频格式，但并不是所有的浏览器都支持这些格式，因此我们在嵌入视频音频文件格式时，就要考虑浏览器的兼容性问题。表1列举了各浏览器对音、视频文件格式的兼容情况。

表1 浏览器支持的视频音频格式

从表1我们可以看出，除了mpeg4和mp3格式外，各浏览器都会有一些不兼容的音频格式。为了保证不同格式的视频、音频能够在各个浏览器中正常播放，我们往往需要提供多种格式的音视频文件共浏览器选择。

在HTML5中，运用source标签可以为video标签或audio标签提供多个备用文件。运用source标签添加音频的基本语法格式如下：

<audio controls="controls"><source src="音频文件地址" type="媒体文件类型/格式"><source src="音频文件地址" type="媒体文件类型/格式">……</audio>

在上面的语法格式中，可以指定多个source标签为浏览器提供备用的音频文件。source标签一般设置两个属性——src和type，对它们的具体介绍如下。

● src：用于指定媒体文件的URL地址。

● type：指定媒体文件的类型和格式。其中类型可以为“video”或“audio”，格式为视频或音频文件的格式类型。

例如，将mp3格式和wav格式同时嵌入到页面中，示例代码如下所示。

<audio controls="controls"><source src="music/1.mp3" type="audio/mp3"><source src="music/1.wav" type="audio/wav"></audio>

source标签添加视频的方法和添加音频的方法基本相同，只需要把audio标签换成video标签即可，其语法格式如下：

<video controls="controls"><source src="视频文件地址" type="媒体文件类型/格式"><source src="视频文件地址" type="媒体文件类型/格式">……</video>

例如，将mp4格式和ogg格式同时嵌入到页面中，可以书写如下示例代码：、

<video controls="controls"><source src="video/1.ogg" type="video/ogg"><source src="video/1.mp4" type="video/mp4"></video>

注意：

1.Safari浏览器对于wav音频格式和mp4视频格式的支持，需要把页面部署到web服务器里面。如果只是单纯的用Safari浏览器打开本地的一个静态页面，则浏览器不支持这两种格式。

2.Opera浏览器同样需要把页面部署到web服务器上，才能支持ogg视频文件格式。

前端教程：浏览器不兼容嵌入的音视频文件怎么办？相关推荐

html文件显示controls,html5中设置或返回浏览器应当显示标准的音视频控件的属性controls...
实例为视频启动控件:myVid=document.getElementById("video1"); myVid.controls=true; 定义和用法 controls 属性 ...
音视频格式不兼容？mac音视频格式转换器哪个好？
音视频格式不兼容?mac音视频格式转换器哪个好? Permute 3支持视频.音乐和图像的格式转换,支持常见的视频.音乐和图像格式,如图片支持PNG.JPEG.TIFF.音乐支持AAC.MP3.WAV ...
如何基于OSS和MPS，快速搭建音视频文件上传服务？
背景本文主要介绍如何基于OSS服务和MPS的上传SDK,快速搭建一个音视频文件上传服务. 优势使用MPS的上传SDK上传音视频文件,具有以下优势: 增加文件列表管理功能. 增加STS Token ...
如何基于OSS和MTS，快速搭建音视频文件上传服务？
摘要: 背景本文主要介绍如何基于OSS服务和MTS的上传SDK,快速搭建一个音视频文件上传服务. 优势使用MTS的上传SDK上传音视频文件,具有以下优势: 增加文件列表管理功能. 增加STS To ...
局域网视频共享 php,window_Windows 7媒体库管理音视频文件实现局域网共享，　任务分析多台电脑连接的家 - phpStudy...
任务分析多台电脑连接的家庭网络已经越来越普遍了,家里的每个成员都想享受多媒体的乐趣,以"家"为单位的多媒体管理和共享就成为要解决的中心问题. 预设方案用Windows 7的媒体 ...
android 传输视频文件,如何将音视频文件传输到安卓设备中
如何将音视频文件传输到安卓设备中万兴优转与Android设备完全兼容,并且可以通过几个鼠标剪辑轻松地将媒体文件传输到Android智能手机或平板电脑上. 你所需要做的就是,在你的电脑上获取视频,将你 ...
音视频文件的容器格式和编码格式
转自:http://blog.chinaunix.net/uid-25885064-id-3338166.html 音视频文件的容器格式和编码格式视频和音频以视频文件格式的形式放在一个文件中,方便同 ...
Excel催化剂开源第37波-音视频文件元数据提取（分辨率，时长，采样率等）
上一篇提到图片元信息Exif的提取,当然还有一类音视频文件,也同样存储着许多宝贵的元数据,那就开源到底呗,虽然自己找寻过程也是蛮艰辛坎坷的,大家看后有收获,只求多多传播下,让前人的工作可以更有价值. ...
误删照片音视频文件不要担心几种方法解救慌乱的你
误删照片音视频文件不要担心几种方法解救慌乱的你推荐的几款软件涵盖了大量的恢复方式,手机如果刷机或者损坏找回的几率会越低免费软件获取方式关注公众号回复8585 更多软件获取方式点我方法1:从手机 ...

前端教程：浏览器不兼容嵌入的音视频文件怎么办？

前端教程：浏览器不兼容嵌入的音视频文件怎么办？相关推荐

最新文章

热门文章