微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。