音频和视频
HTML5音频与视频
<audio src="rubberfuckies.mp3" controls></audio>
- src属性是要播放的音频文件的文件名。
- controls属性是基本的播放控件
- preload属性告诉浏览器如何下载音频,没有设置该属性,浏览器会自己决定是否预下载。
- auto,让浏览器下载整个文件
- metadata告诉浏览器先获取音频文件开头的数据,从而足以确定基本信息
- none,告诉浏览器不必预先下载
- autoplay属性,告诉浏览器在加载完音频文件之后立即播放。
- loop告诉浏览器在是否循环播放
与audio有着相同的src、controls、preload、auto play、loop
格式与后备措施
谈谈格式
某些HTML5浏览器支持的标准:
浏览器对媒体格式的支持
对音频格式:
对视频格式:
使用
要支持多种格式,就要删除src属性,嵌套元素:
<audio controls>
<source src="rubber.mp3" type="audio/mp3">
<source src="rubber.ogg" type="audio/ogg">
</audio>
JavaScript控制播放器
添加音效
在页面添加一个不可见的元素,然后再必要的时候调用play方法,开始播放
<audio id=”backgroundMusic" loop>
<source src="rubber.mp3" type="audio/mp3">
<source src="rubber.ogg" type="audio/ogg">
</audio>
var audioE = document.getElementById("backgroundMusic");
audioElement.play();
audioElement.pause()//停止
添加多个:
<audio id=”audio1" >
<source src="rubber.mp3" type="audio/mp3">
<source src="rubber.ogg" type="audio/ogg">
</audio>
<audio id=”audio2" >
<source src="rubber.mp3" type="audio/mp3">
<source src="rubber.ogg" type="audio/ogg">
</audio>
<audio id=”audio3" >
<source src="rubber.mp3" type="audio/mp3">
<source src="rubber.ogg" type="audio/ogg">
</audio>
var audioElementCount = 3;
var audioElementIndex = 1;
function boing() {
var audioElementName = "audio"+audioElementIndex;
var audio = document.getElementById(audioElementName);
audio.currentTime = 0;
audio.play();
if( audioElementIndex == audioElementCount){
audioElementIndex =1;}else{
audioElementIndex += 1;
}
}
创建自定义视屏播放器
方法:
play()
pause()
video.pause(); video.currentTime =0;
video.play(); video.playbackRate = 2;
video.play(); video.playbackRate = 0.5
video.play(); video.playbackRate = 1