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
上一篇:Python爬虫新手入门教学(十六):爬取网站音乐素材


下一篇:Android9 Audio模块Hal层加载流程及修改方法