自古英雄出少年
现代少年多极客

HTML5多媒体控制-Audio(音频)和Video(视频)

概述

HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容,这两个标签是<audio><video>。使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容,在浏览器不支持这两个媒体元素的情况下显示

使用

video

<video id="media" controls poster="http://ofjfvj5z7.bkt.clouddn.com/poster.png">
  <source src="http://ofjfvj5z7.bkt.clouddn.com/trailer.mp4" type="video/mp4">
  <source src="http://ofjfvj5z7.bkt.clouddn.com/trailer.webm" type="video/webm">
  <source src="http://ofjfvj5z7.bkt.clouddn.com/trailer.ogv" type="video/ogg">
  <div>
     您的浏览器不支持HTML5视频
  </div>
</video>

您的浏览器不支持HTML5视频

使用字幕

<video src=video.ogg controls >
  <track label=English kind=subtitles srclang=en src=subtitles_en.vtt>
  <track label=Dutch kind=subtitles srclang=nl src=subtitles_nl.vtt>
  Your browser does not support HTML5 video.
</video>

音频

<audio controls>
    <source src=http://ofjfvj5z7.bkt.clouddn.com/1.mp3>
    An audio clip from Johann Sebastian Bach.
</audio>

可设置属性

属性 说明
autoplay 如果出现该属性,则音频在就绪后马上播放
controls 显示控件,比如播放按钮
loop 音频结束时重新开始播放
preload 音频在页面加载时进行加载,并预备播放 如果使用 autoplay,则忽略该属性。
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
currentTime 以s为单位返回从开始播放到目前所花的时间
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体播放器是否进行缓冲加载,如果设置了autoplay,则忽略此属性

只读属性

属性 说明
duration 获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
paused 如果媒体文件被暂停,则返回true,否则返回false
ended 如果媒体文件播放完毕,则返回true
startTime 返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currenSrc 以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

video特有属性

可以使用width和height属性设置video的大小,如果不设置该属性,则使用播放源文件的大小;如果播放源文件的大小不可用,则使用poster属性中的文件大小。poster属性表示所选图片URL,如果添加该属性,将在视频文件播放前显示该图片,而不是默认显示视频文件的第一帧。

<video id=media controls= preload=none poster=poster.png>
    <source  src=trailer.mp4 type=video/mp4>
</video>

方法

属性 说明
load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
play() 加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件
canPlay() 检测当前浏览器是否支持媒体文件的类型 ,返回结果[' '|'maybe'|'Probably']

事件

属性 说明
abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedmetadata 当收到总时长,分辨率和字轨等metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
pause 当媒体暂停时产生该事件
play 当媒体播放时产生该事件
playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress 当获取到媒体数据时产生该事件
ratechange 当播放倍数改变时产生该事件
seeked 当用户完成跳转时产生该事件
seeking 当用户正执行跳转时操作的时候产生该事件
stalled 当试图获取媒体数据,但数据还不可用时产生该事件
stalled 当试图获取媒体数据,但数据还不可用时产生该事件
suspend 当获取不到数据时产生该事件
timeupdate 当前播放位置发生改变时产生该事件
volumechange 当前音量发生改变时产生该事件
waiting 当视频因缓冲下一帧而停止时产生该事件

进阶

背景音乐

视频控制

赞(0)
未经允许不得转载:极客少年 » HTML5多媒体控制-Audio(音频)和Video(视频)
分享到: 更多 (0)

极客少年

大道至简码支付源码