HTML5学习四---Web表单

音频和视频

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