HTML中多媒体的应用

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

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

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

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

常见视频格式

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

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

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

音频格式

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

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

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

在HTML中播放视频

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

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

元素 Chrome IE Firefox Safari Opera
<video> 4.0 9.0 3.5 4.0 10.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标签”这行文本只会在浏览器不支持该标签时显示。

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

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

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

各格式对应的type值:

文件格式 type值
MP4 video/mp4
WebM video/webm
Ogg video/ogg

在HTML中播放音频

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

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

元素 Chrome IE Firefox Safari Opera
<audio> 4.0 9.0 3.5 4.0 10.5

用法:

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

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

浏览器 MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

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

各格式对应的type值:

文件格式 Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/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>

效果如下:

发帖时间: web