HTML5文档的多媒体特性以及支持条件 嵌入视频和音频

鳄鱼君Ba

发表文章数:514

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML5教程 » HTML5文档的多媒体特性以及支持条件 嵌入视频和音频

在HTML5出现之前,并没有将视频、音频嵌入到页面中的标准方式。多媒体的应用大多都是通过第三方插件(Falsh),实现方式比较复杂。在HTML5中新增了video标签(为页面添加视频)audio标签(为页面添加音频),但是在使用的时候会受到浏览器和音频编码解码器的影响。

多媒体特性

由于音频视频的原始数据,一般都比较大,如果不对其进行编码,那么在进行传播时就会消耗大量的时间,影响用户体验!所以在音视频加载之前,必须对原始数据进行压缩编码,于是就产生了视频音频编码和解码器。视频数据流编码和解码的算法

  • H.264是国际标准化组织(ISO)和国际电信联盟(ITU)共同提出的继MPEG4之后的新一代数字视频压缩格式。
  • Theor是免费开放的视频压缩编码技术,可以支持从VP3 HD高清到MPEG 4/DiVX视频格式。
  • VP8 是第八代的On2视频,能以更少的数据提供更高质量的视频,而且只需较小的处理能力即可播放视频。

音频数据流编码编码和解码算法:

  • ACC是高级 音频编码(Advanced Audio Coding)的简称,该音频编码是基于MPEG-2的音频编码技术,目的是取代MP3格式。
  • MP3是“MPEG-1 音频层3”的简称,它被设计用来大幅度地降低音频数据量。
  • Ogg全称Ogg Vorbis,是一种新的音 频压缩格式,类似于MP3等现有的音乐格式。OGG Vorbis支持多声道。

在HTML5中常见的视频格式:OggMPEGWebM;音频格式:VorbisMP3Wav。随着HTML5技术的普及,很多浏览器已经实现了对HTML5中video和audio元素的支持。音视频中source元素的支持情况:

格式 IE 9 Firefox 4.0 Opera10.6 Chrome 6.0 Safari 3.0
视频格式
OGG
MPEG 4
WebM
音频格式
Ogg Vorbis
MP3
Wav

嵌入视频和音频

● video标签,用于定义播放视频文件的标准

<video src="视频文件路径" controls="controls"> </video>

常用属性值:

属性 属性值 描述
autoplay autoplay 当页面载入完成后自动播放视频
loop loop 视频结束时重新开始播放
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。
poster url 当视频缓冲不足时,该属性值链接一个图像,并将图像按照一定的比列显示出来

● audio标签,用于定义播放音频文件的标准

<audio src="音频文件路径" controls="controls"> </audio>

常用属性值:

属性 属性值 描述
autoplay autoplay 当页面载入完成后自动播放视频
loop loop 视频结束时重新开始播放
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。

我们不可能让用户去选择支持音视频的浏览器,所以需要做好兼容效果,就需要提供多种格式的音视频文件。

● source元素可以为video元素或audio元素提供多个备用文件

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

src:指定媒体文件的URL地址

type:指定媒体文件的类型

音视频的方法

● load(),加载媒体文件,为播放做准备。通常用于播放前的预加载,也会用语重新加载媒体文件。

● paly(),播放媒体文件。如果视频没有加载,则加载并播放;如果视频是暂停的,则变为播放。

● pause()暂停播放媒体文件。

● canPlayType()测试浏览器是否支持指定的媒体文件。

音视频的事件

方法 描述
play 当执行方法play()时触发
playing 正在播放时触发
pause 当执行方法pause()时触发
timeupdate 当播放位置被改变时触发
ended 当播放结束后停止播放时触发
waiting 在等待加载下一帧时触发
ratechange 在当前播放速率改变时触发
canplay 以当前播放速率,需要缓冲时触发
canplaythrough 以当前播放速率,不需要缓冲时触发
durationchange 当播放时长改变时触发
loadstart 在浏览器开始在网上寻找数据时触发
progress 当浏览器正在获取媒体文件时触发
suspend 当浏览器暂停获取媒体文件,且文件获取并没有正常结束时触发
abort 当终止获取媒体数据时触发,但这种终止不是由错误引起的
error 当获取媒体过程中出错时触发
emptied 当所在网络变为初始化状态时触发
stalled 浏览器尝试获取媒体数据失败时触发
loadedmetadata 在加载完媒体元素数据时触发
seeking 浏览器正在请求数据时触发
seeked 浏览器停止请求数据时触发

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《HTML5文档的多媒体特性以及支持条件 嵌入视频和音频》 发布于2020-05-29

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

2 + 5 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册