HTML中多媒体的应用

关于多媒体的定义不再赘述，图像、音视频、电影、动画都属于多媒体。

第一代浏览器仅支持单一字体、单一颜色的文本，之后的浏览器开始支持多种字体，多种颜色以及图像。

各主流浏览器对音频、视频、动画的处理方式都不尽相同，支持的格式也多种多样，某些格式需要插件才能工作。

自HTML5问世以来，多媒体的处理进入了一个新的时代，一切变得更加方便和容易了。

常见视频格式

MP4是一种新兴的互联网视频格式，YouTube推荐使用，收到HTML5、Flash Player的支持。

格式后缀名描述MPEG.mpg
.mpegMPEG，由“动态图像专家组”（Moving Pictures Expert Group）开发，第一种流行于网络的视频格式，受到所有浏览器的支持，但不受HTML5支持。AVI.aviAVI (Audio Video Interleave)，由微软开发，常用于摄影机与电视，可在Windows电脑上播放。WMV.wmvWMV (Windows Media Video)，由微软开发，常用于摄影机与电视，可在Windows电脑上播放。QuickTime.movQuickTime，由苹果公司开发，常用于摄影机与电视，可在苹果电脑上播放。RealVideo.rm
.ramRealVideo，由Real Media开发，一种低带宽流式视频格式，现在仍用于在线视频和互联网电视。Flash.swf
.flvFlash，由Macromedia开发，通常需要借助flash player插件才能在浏览器中播放。Ogg.oggTheora Ogg，由Xiph.Org基金会开发，受到HTML5支持。WebM.webmWebM，由网络巨头Mozilla, Opera, Adobe, Google合作开发，受到HTML5支持。MPEG-4
or MP4.mp4MP4，由“动态图像专家组”Moving Pictures Expert Group基于QuickTime开发，常用于新式摄影机、电视机，受到所有HTML5浏览器的支持，受到YouTube推荐。

注意，只有MP4、WebM、Ogg受到HTML5标准的支持。

音频格式

MP3是用于压缩录制音乐的最新格式，MP3已经成为数字音乐的代名词。

格式后缀名描述MIDI.mid
.midiMIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。RealAudio.rm
.ramRealAudio，由Real Media开发，低带宽音频流。WMA.wmaWMA (Windows Media Audio)，由微软开发，常用于Windows设备上的音乐播放器。AAC.aacAAC (Advanced Audio Coding)，由苹果公司开发，iTunes的默认格式，支持苹果设备。WAV.wavWAV，由IBM和Microsoft，可在Windows, Macintosh, Linux操作系统中播放，受到HTML5支持。Ogg.oggOgg，由Xiph.Org基金会开发，受到HTML5支持。MP3.mp3MP3文件实际上是MPEG文件的音频部分，MP3是音乐播放器中最流行的格式，高压缩率与高品质的结合，受到所有浏览器的支持。MP4.mp4MP4是一种视频格式，但也可以用于音频。

只有MP3、WAV、Ogg受到HTML5标准的支持。

在HTML中播放视频

在HTML5出现之前，只能通过插件在浏览器中播放视频。HTML5的<video>元素指定了一种在Web页面中嵌入视频的标准方式。

支持<video>元素的浏览器最早版本如下:

元素ChromeIEFirefoxSafariOpera<video>4.09.03.54.010.5

用法：

<video width="320" height="240" controls autoplay>    <source src="example.mp4" type="video/mp4">    <source src="example.ogg" type="video/ogg">    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">    <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">你的浏览器不支持video标签。</video>

controls属性：添加视频控制按钮，如播放、暂停、音量、下载。

autoplay属性：自动播放，在移动设备比如iPad、iPhone中这个属性不能正常工作。

总是指定width、height是个好习惯。

<source>元素指定视频源，可指定多个可替代源供浏览器选择，浏览器通常会选择第一个可识别源。

<track>元素，指定视频字幕，详见https://www.w3schools.com/tags/tag_track.asp。

“你的浏览器不支持video标签”这行文本只会在浏览器不支持该标签时显示。

浏览器对三种格式的支持情况如下：

浏览器MP4WebMOggInternet ExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYES (from Opera 25)YESYES

可见MP4的支持情况最好，所以可能的话，尽量使用MP4格式。

各格式对应的type值：

文件格式type值MP4video/mp4WebMvideo/webmOggvideo/ogg

在HTML中播放音频

与视频一样，在HTML5出现之前，只能通过插件在浏览器中播放音频。HTML5的<audio>元素指定了一种在Web页面中嵌入音频的标准方式。

支持<audio>元素的浏览器最早版本如下:

元素ChromeIEFirefoxSafariOpera<audio>4.09.03.54.010.5

用法：

<audio controls>    <source src="example.mp3" type="audio/mpeg">    <source src="example.ogg" type="audio/ogg">你的浏览器不支持audio标签。</audio>

 浏览器对各格式的支持情况：

浏览器MP3WavOggInternet ExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESYESNOOperaYESYESYES

可见MP3的支持最完善，所以可能的话音频尽量使用MP3格式。

各格式对应的type值：

文件格式Media TypeMP3audio/mpegOggaudio/oggWavaudio/wav

完整的HTML5 Audio/Video DOM参考：https://www.w3schools.com/tags/ref_av_dom.asp

HTML插件

插件的作用是拓展浏览器的功能，一个典型的例子是Java小应用程序（Java applets），插件可以通过<object>或<embed>标签添加到网页中，插件的用途有很多，比如展示地图、扫描病毒、验证银行卡号等。

<object>元素

<object>受到所有浏览器的支持，用来定义一个嵌入的对象，可用于在网页中嵌入插件（比如Java applets、PDF阅读器、Flash播放器）。

<object width="400" height="50" data="bookmark.swf">你的浏览器不支持此标签</object>

也可以用来在HTML中嵌入HTML：

<object width="100%" height="500px" data="example.html"></object>

如何你乐意的话也可以用来插入图片：

<object data="car.jpeg"></object>

 <embed>元素

大多数主流浏览器都支持这个标签，<embed>也是用来定义嵌入的对象的。

浏览器对<embed>的支持已经有很长一段时间了，但直到HTML5出现之前，<embed>都没能正式进入HTML规范。

<embed width="400" height="50" src="bookmark.swf"><embed width="100%" height="500px" src="example.html"><embed src="car.jpeg">

<embed>无闭合标签，所以是不能添加替代文本的。

在自己的网站中插入视频的更佳实现

除非你的网站是专门的视频网站，否则直接将视频放置到服务器上然后调用是不明智的选择。

将视频上传到服务器上不仅会使你的服务器流量骤增，压力增大，而且受限于服务器有限的带宽，也会给用户带来不流畅的观影体验。

所以最佳的实践应当是将需要的视频上传到视频服务网站，比如大陆的腾讯视频、优酷等。至于如何上传，不再赘述。此类视频网站都直接提供了嵌入视频的代码，复制即可。

如何在网页中插入腾讯视频？

点击视频下方的分享按钮，复制代码插入网页即可。

<iframe frameborder="0" width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=a00239c307x&tiny=0&auto=0" allowfullscreen></iframe>

此处我们选择通用代码，通用代码支持在移动设备上播放。

 

如何在网页中插入优酷视频？

方法同上：

<iframe height=498 width=510 src='http://player.youku.com/embed/XMjc5NzcyNzU4NA==' frameborder=0 'allowfullscreen'></iframe>

在网页中插入音乐也可以这样，比如直接在网易云音乐的音乐库中找到所需音乐，复制代码即可。

如何在网页中插入网易云音乐？

点击曲目，点击封面下方的“生成外链播放器”，复制相关代码即可。

此处赋值iframe代码：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=21725725&auto=1&height=66"></iframe>

效果如下：