HTML5——音频audio与视频video

文件日志地址  　　http://blog.csdn.net/q1056843325/article/details/60336226

 

音频与视频如今已经变得愈来愈流行
各个网站为了保证跨浏览器的兼容性
仍然选择使用flash

（源码截自优酷）

多媒体标签

使用

HTML5增长了audio与video两个多媒体标签
兼容性还不错，低版本IE不支持
可使咱们不须要使用任何浏览器插件就可以插入音频与视频控件
并且很是的简单

（源码截自Bilibili）

元素用法以下

• 1 <audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
• 2 <video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

标签中内容若是浏览器不支持该标签就会显示
固然使用这两个元素的时候
最起码要添加src属性，属性值就是资源的url

可是每一个浏览器因为版权问题支持的媒体格式也不一样
因此就可使用下面的方式

<audio id="demoAudio"> <source src="media/xi-Halcyon.mp3"> <source src="media/xi-Halcyon.ogg"> ... 不支持H5-audio </audio> <video id="demoVideo"> <source src="media/Animation.mp4"> <source src="media/Animation.webm"> ... 不支持H5-video </video>

这样指定不一样的资源格式
也保证了各个浏览器的兼容性

属性

audio和video标签除了src外
还有一些公有的属性

属性	描述
autoplay	设置该属性后，音/视频资源就绪后当即播放
controls	设置该属性后，则显示浏览器播放控制控件
loop	设置该属性后，则音/视频结束后从新循环开始播放
preload	设置该属性后，则音/视频在页面加载时进行加载，并预备播放（使用autoplay会忽略该属性）

前三个属性属性名与属性值相同，直接添加属性名便可
preload有以下属性值

• none 不加载数据
• metedata 仅加载元数据（时长、比特率、帧大小等）
• auto 浏览器加载它认为适量的媒体内容

好比想要在浏览器添加一段音乐
而且加载后当即播放，循环播放
使用浏览器的播放控件

• 1  <audio src="media/xi-Halcyon.mp3" id="demoVideo" autoplay controls loop></audio>

控件的样式各个浏览器都不同
随着浏览器版本的更新，可能还会更新样式

---

video元素还有独有的属性poster
属性值是图片资源的url
用来设置视频播放前的一张占位图片

<video src="media/Animation.mp4" id="demoVideo" width="500" height="400" poster="images/preimg.jpg" controls></video>

• 1

• 1

---

点击播放后，视频正常播放

脚本化音视频

元素

使用js获取dom节点就很简单了

• 1  var a = document.getElementById('demoAudio');
• 2   var v = document.getElementById('demoVideo');

相似于image的Image构造函数
Audio也能够经过相似的方式建立（Video不能够）
区别在于Image建立的图片是要插入文档的
可是Audio不须要

• 1  var a = new Audio('song.mp3');

而后能够为它添加autoplay、loop等属性
而后添加到页面

接口

在获取的DOM节点上可使用浏览器提供的接口属性和方法
经常使用的属性、方法以下

• currentSrc 媒体数据的URL地址
• volume 播放音量
  
  • 介于0~1（注意超范围会报错），默认1最大音量
• muted 是否静音
  
  • 设置true进入静音模式
• playbackRate 媒体播放速度
  
  • 默认1.0常速，>1快进，<1慢放（负值表回放但无浏览器实现此功能）
• defaultPlaybackRate 媒体默认的播放速度
• currentTime 当前播放时间（单位s）
• duration 媒体时长（单位s）
• play() 播放音/视频
• pause() 暂停音/视频
• load() 从新加载音/视频（一般用于修改元素属性后）

---

除此以外还有

• played 已经播放的时间段
• buffered 已经缓冲的时间段
• seekable 用户能够跳转的时间段

它们都是TimeRanges对象
每一个对象都有一个length属性（表示当前时间段）
以及start()和end()方法（返回当前时间段的起始时间点和结束时间点，单位s）
start()和end()都有一个数字参数，表示第一个时间段
肯定当前缓存内容百分比：

• 1   var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)

---

下面三个布尔属性表示媒体播放器的状态

• paused 是否暂停
• seeking 是否正调到一个新的播放点
• ended 是否播放结束并中止

---

并非全部浏览器都支持video和audio的全部编解码器
canPlayType()方法就是用来鉴定时候支持某一格式的媒体资源
返回字符串maybe、probably或空字符串
若是只传入MIME类型，则返回maybe
若是同时传入MIME类型和编解码器，则返回probably（可能性增长了）
只是由于媒体文件只不过是音/视频的容器
真正决定文件可否播放的还得是编码格式

• 1 console.log(a.canPlayType('audio/mp4')); //maybe
• 2 console.log(a.canPlayType('audio/mp4;codecs="mp4a.40.2"')); //probably

---

下面的状态位属性也了解一下

• readyState 就绪状态
  
  • 0 = HAVE_NOTHING - 没有关于音/视频是否就绪的信息
  • 1 = HAVE_METADATA - 关于音频/视频就绪的元数据
  • 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/ms
  • 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据可用
  • 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
• netWorkState 网络状态
  
  • 0 = NETWORK_EMPTY - 音/视频还没有初始化
  • 1 = NETWORK_IDLE - 音/视频是活动的且已选取资源，但并未使用网络
  • 2 = NETWORK_LOADING - 浏览器正在下载数据
  • 3 = NETWORK_NO_SOURCE - 未找到音/视频来源
• error.code 错误状态
  
  • 1 = MEDIA_ERR_ABORTED - 取回过程被用户停止
  • 2 = MEDIA_ERR_NETWORK - 当下载时发生错误
  • 3 = MEDIA_ERR_DECODE - 当解码时发生错误
  • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

事件

除了接口属性方法之外
还有必不可少的事件模型
若是咱们不想使用浏览器的控件而是定义本身的播放控制组件
就要使用这套事件了

• play 播放时触发
• pause 暂停时触发
• loadedmetadata 浏览器获取完媒体元数据时触发
• loadeddata 浏览器加载完当前帧媒体数据时触发
• ended 播放结束后中止时触发

初次以外还有不少事件
不少不经常使用
在w3c截了一张图

---

经过接口与事件
也能够简单的实现本身简陋的音乐播放器

• 1  <button id="btn">播放</button>
• 2 <span id="cur">0s</span>/<span id="dur">0s</span><br>
• 3 音量：<input type="range" id="vol">

var audio = new Audio('media/xi-Halcyon.mp3'); var btn = document.getElementById('btn'); var vol = document.getElementById('vol'); var cur = document.getElementById('cur'); var dur = document.getElementById('dur'); var state = 'pause'; vol.value = 100; audio.onloadeddata = function(){ dur.textContent = Math.floor(audio.duration) + 's'; } setInterval(function(){ cur.textContent = Math.floor(audio.currentTime) + 's'; }, 200); btn.onclick = function(){ if(state === 'play'){ state = 'pause'; btn.textContent = '播放'; audio.pause(); }else{ state = 'play'; btn.textContent = '暂停'; audio.play(); } } vol.oninput = function(){ audio.volume = vol.value/100; }