audio和video元素_html/css_WEB-ITnose-HTML Tutorial-php.cn

目录 [1]HTML元素 audio video source [2]API 方法属性事件 audio专有

前面的话

　　HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是

　以视频文件举例，它包含了音频轨道、视频轨道和其他一些元数据(封面、标题、子标题、字幕等)

HTML元素

　　使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示

autoplay         自动播放controls         显示控件loop             循环播放preload          音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)src              要播放的音频的URL

Copy after login

<audio controls autoplay loop muted src="song.mp3">   <source src="song.mp3" type="audio/mp3" /></audio>

Copy after login

　　<演示框>点击下列相应属性值可进行演示

autoplay            自动播放controls            显示控件height         　　　播放器高度width         　　　 播放器宽度loop                循环播放preload        视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)preload="none"//当页面加载后不载入视频preload="auto"//当页面加载后载入整个视频preload="meta"//当页面加载后只载入元数据src                 要播放的视频的URLposter        　　　 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

Copy after login

<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>

Copy after login

　　<演示框>点击下列相应属性值可进行演示

　　为

media     规定媒体资源的类型(没有浏览器支持)src     　规定媒体文件的URLtype      规定媒体资源的MIME类型

Copy after login

　　常用类型

　　　　视频 [1]video/ogg [2]video/mp4 [3]video/webm

　　　　音频 [1]audio/ogg [2]audio/mpeg

　　使用

<video src="#">    video player not available.</video>

Copy after login

<audio src="#">    audio player not available.</audio>

Copy after login

　　因为并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是使用一个或多个元素

<video>    <source src="video.webm" type="video/webm; codecs='vp8,vorbis'">    <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'">    <source src="video.mp4">    video player not available.</video>

Copy after login

<audio>    <source src="audio.ogg" type="audio/ogg">    <source src="audio.mp3" type="audio/mp3">    audio player not available.</audio>

Copy after login

　　因为并非所有浏览器都支持

<audio controls="controls" height="100" width="100">    <source src="song.mp3" type="audio/mp3" />    <embed height="100" width="100" src="song.mp3" /></audio>

Copy after login

<video width="320" height="240" controls="controls">  <source src="movie.mp4" type="video/mp4" />  <object data="movie.mp4" width="320" height="240">    <embed src="movie.mp4" width="320" height="240" />  </object></video>

Copy after login

API

　　HTML5 DOM为

方法

(1)canPlayType()

　　检测浏览器是否能播放指定的音频或视频类型，返回值为下列之一：

'probable':浏览器最可能支持该类型'maybe':浏览器也许支持该类型'':浏览器不支持该类型

Copy after login

//常用值video/oggvideo/mp4video/webmaudio/mpegaudio/oggaudio/mp4video/ogg;codecs="theora,vorbis"video/mp4;codecs="avc1.4D401E,mp4a.40.2"video/webm;codecs="vp8.0,vorbis"audio/ogg;codecs="vorbis"audio/mp4;codecs="mp4a.40.5"

Copy after login

<audio id="audio" src="song.mp3"></audio>    <script>var audio = document.getElementById('audio');//probablyconsole.log(audio.canPlayType('video/ogg;codecs="theora,vorbis"'));</script>

Copy after login

(2)load()

　　重新加载音频或视频元素，用于在更改src来源或其他设置后对音频或视频元素进行更新

<audio id="audio" src="song.mp3" autoplay controls></audio>    <script>    var audio = document.getElementById('audio');    audio.src = 'myocean.mp3';    audio.load();</script>

Copy after login

(3)play()

　　开始播放音频或视频

(4)pause()

　　暂停当前播放的音频或视频

<button onclick = 'audio.play();'>播放</button><button onclick = 'audio.pause();'>暂停</button><audio id="audio" src="myocean.mp3" controls></audio>

Copy after login

　　<演示框>点击下列相应属性值可进行演示

属性

　　[注意]所有属性中，只有videoWidth和videoHeight是立即可用的，在音视频的元数据加载后，其他属性才可用

<只读>

(1)buffered

buffered.length//获取已缓冲范围的数量buffered.start(index)//获取某个已缓冲范围的开始位置buffered.end(index)//获取某个已缓冲范围的结束位置buffered.end(0)//获取当前已缓冲的秒数

Copy after login

<button>获取缓冲时间</button><audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>var oBtn = document.getElementsByTagName('button')[0];oBtn.onclick = function(){    alert(audio.buffered.end(0));}</script>

Copy after login

(2)currentSrc

　　返回当前音频或视频的URL

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>var audio = document.getElementById('audio');//http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3setInterval(function(){    console.log(audio.currentSrc);    },1000); </script>

Copy after login

(3)ended

　　返回音频或视频是否已结束

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>document.onclick = function(){    console.log(audio.ended);}    </script>

Copy after login

(4)duration

　　返回当前音频或视频的长度(以秒计)，如果未设置则返回NaN

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>//NaNconsole.log(audio.duration);//317.022041setTimeout(function(){ console.log(audio.duration);},1000);

Copy after login

(5)networkState

　　返回音频或视频当前网络状态

networkState:0(尚未初始化)networkState:1(已选取资源，但并未使用网络)networkState:2(正在下载数据)networkState:3(未找到资源来源)

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>//3console.log(audio.networkState)//1document.onclick = function(){    console.log(audio.networkState);}</script>

Copy after login

(6)paused

　　返回音频或视频是否已暂停

paused:true;(已暂停)paused:false;(未暂停)

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>console.log(audio.paused)document.onclick = function(){    console.log(audio.paused);}</script>

Copy after login

(7)played

　　已播范围是指音频或视频的时间范围。如果用户在音频或视频中跳跃，会获得多个播放范围

played.length(获得音频或视频已播放范围的数量)played.start(index)(获得某个已播范围的开始位置)played.end(index)(获得某个已播范围的结束位置)

Copy after login

　　[注意]首段已播范围的下标是0

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>document.onclick = function(){    console.log(audio.played.end(0));}</script>

Copy after login

(8)readyState

　　返回音频或视频的当前就绪状态

readyState:0(没有关于音频或视频是否就绪的信息)readyState:1(关于音频或视频就绪的元数据)readyState:2(关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧)readyState:3(当前及至少下一帧的数据是可用的)readyState:4(可用数据足以开始播放)

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>//0console.log(audio.readyState);//4document.onclick = function(){    console.log(audio.readyState);}</script>

Copy after login

(9)seekable

　　返回可寻址范围，可寻址范围是指用户在视频或音频中可寻址(移动播放位置)的时间范围。对于流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲

seekable.length(获得音频或视频中可寻址范围的数量)seekable.start(index)(获得可寻址范围的开始位置)seekable.end(index)(获得可寻址范围的结束位置)

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>document.onclick = function(){    console.log(audio.seekable.end(0));}</script>

Copy after login

(10)seeking

seeking:true(用户正在寻址)seeking:false(用户没有在寻址)

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>audio.onseeking = function(){    console.log(audio.seeking);    }    </script>

Copy after login

<可读写>

(1)autoplay

autoplay:false(默认，不自动播放)autoplay:true(自动播放)

Copy after login

(2)controls

controls:false(默认，不显示控件)controls:true(显示控件)

Copy after login

(3)crossOrigin

　　设置或返回CORS设置

(4)currentTime

　　设置或返回音频或视频的当前位置(以秒计)

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>var audio = document.getElementById('audio');document.onclick = function(){    console.log(audio.currentTime);        audio.currentTime = 5;    console.log(audio.currentTime);}; </script>

Copy after login

(5)defaultMuted(只有chrome支持)

defaultMuted:true(初始静音)defaultMuted:false(默认，初始不静音)

Copy after login

audio.defaultMuted = true;

Copy after login

(6)muted

muted:true(静音)muted:false(不静音)

Copy after login

<button onclick="audio.muted = !audio.muted">音量开关</button><audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

Copy after login

(7)defaultPlaybackRate

defaultPlaybackRate:1(正常速度)defaultPlaybackRate:0.5(半速)defaultPlaybackRate:2(倍速)defaultPlaybackRate:-1(向后正常速度)defaultPlaybackRate:-0.5(向后半速)

Copy after login

var audio = document.getElementById('audio');setTimeout(function(){    audio.defaultPlaybackRate = 0.5;    audio.load();    },1000);

Copy after login

(8)playbackRate

playbackRate:1(正常速度)playbackRate:0.5(半速)playbackRate:2(倍速)playbackRate:-1(向后正常速度)playbackRate:-0.5(向后半速)

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>var array = [-1,-0.5,0.5,1,2];var i = 0;var audio = document.getElementById('audio');document.onclick = function(){    audio.playbackRate = array[i];    console.log(audio.playbackRate);    i++;    i=i%5;}

Copy after login

(9)loop

loop:true(循环播放)loop:false(默认，不循环播放)

Copy after login

(10)preload

　　设置或返回是否在页面加载后立即加载音频或视频

preload:auto;(一旦页面加载，则开始加载音频或视频)preload:metadata;(当页面加载后仅加载音频或视频的元数据)preload:none;(页面加载后不加载音频或视频)

Copy after login

　　[注意]当设置autoplay时，该属性无效

(11)src

　　设置或返回音频或视频的当前来源

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>console.log(audio.src);document.onclick = function(){    console.log(audio.src);    audio.src = 'http://7xpdkf.com1.z0.glb.clouddn.com/song.mp3';    audio.load();    console.log(audio.src);}    </script>

Copy after login

(12)volume

　　设置或返回音频或视频的当前音量

volume(取得为0-1，0为静音，1为最大，默认为1)

Copy after login

<button onclick = "if(audio.volume<=0.9)audio.volume+=0.1;">增大音量</button><button onclick = "if(audio.volume>=0.1)audio.volume-=0.1;">减小音量</button><audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio>

Copy after login

事件

　　当音频或视频正在加载过程中，会依次发生以下事件：

loadstart:提示浏览器开始寻找指定的音频或视频progress:提示浏览器正在下载指定的音频或视频durationchange:提示音频或视频的时长已改变loadedmetadata:提示音频或视频的元数据已加载loadeddata:提示音频或视频的当前帧已加载，但没有足够数据播放下一帧canplay:提示浏览器能够开始播放指定的音频或视频canplaythrough:提示音频或视频能够不停顿地一直播放progress:提示浏览器正在下载指定的音频或视频

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls></audio><script>    audio.onloadstart = function(){    console.log('loadstart');}audio.ondurationchange = function(){    console.log('durationchange');}    audio.onloadedmetadata = function(){    console.log('loadedmetadata');}    audio.onloadeddata = function(){    console.log('loadeddata');}    audio.onprogress = function(){    console.log('progress');}    audio.oncanplay = function(){    console.log('canplay');}    audio.oncanplaythrough = function(){    console.log('canplaythrough');}    </script>

Copy after login

　　影响音频或视频数据加载的事件有以下几个：

abort:在音频或视频终止加载时触发error:在音频或视频加载发生错误时触发stalled:在浏览器尝试获取媒体数据，但数据不可用时触发suspend:在音频或视频数据被阻止加载时触发(可以是完成加载后触发，或者因为被暂停)<br />empted:在发生故障并且文件突然不可用时触发<br />

Copy after login

<video id="video" src="http://7xpdkf.com1.z0.glb.clouddn.com/movie.mp4" controls></video><script>setTimeout(function(){    video.src='';},2000);    video.onabort = function(){    console.log('abort');}video.onerror = function(){    console.log('error');}    video.onstalled = function(){    console.log('stalled');}    video.onsuspend = function(){    console.log('suspend');}    video.onemptied = function(){    console.log('emptied');}</script>

Copy after login

　　音频或视频控制按钮发生改变时触发以下事件:

play:音频或视频文件已经就绪可以开始播放时触发playing:音频或视频已开始播放时触发ended:音频或视频文件播放完毕后触发pause:音频或视频文件暂停时触发ratechange:播放速度改变进触发seeked:指示定位已结束时触发seeking:正在进行指示定位时触发timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]volumechange:音量改变时触发waiting:需要缓冲下一帧而停止时触发

Copy after login

<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3" controls></audio><script>    var i = 1;document.onclick = function(){    i+=0.1;    audio.playbackRate = i;}audio.onended = function(){    console.log('ended');}audio.onpause = function(){    console.log('pause');}    audio.onplay = function(){    console.log('play');}    audio.onplaying = function(){    console.log('playing');}    audio.onratechange = function(){    console.log('ratechange');}    audio.onseeked = function(){    console.log('seeked');}    audio.onseeking = function(){    console.log('seeking');}    audio.ontimeupdate = function(){    console.log('timeupdate');}    audio.onvolumechange = function(){    console.log('volumechange');}    audio.onwaiting = function(){    console.log('waiting');}    </script>

Copy after login

audio专有

var audio = new Audio('test.mp3');

Copy after login

<script>var audio = new Audio('http://7xpdkf.com1.z0.glb.clouddn.com/honey.mp3');audio.oncanplaythrough = function(){    audio.controls = true;    document.body.appendChild(audio);}</script>

Copy after login