H5 學習筆記（day03)HTML＜audio＞＜video＞-有解無憂

< audio > 與< video>標簽

瀏覽器支持：

瀏覽器	是否支持
IE	IE 9+
Firefox	√
Chrome	√
Safari	√
Opera	√

提示：IE8 以及 IE8- 不支持 audio 標簽，

定義與使用：

< audio >定義聲音，比如音樂或其他音頻流，
< audio >支持的格式：mp3、wav、ogg
瀏覽器支持的檔案格式：

瀏覽器	mp3	wav	ogg
IE 9+	√
Firefox 3.5		√	√
Chrome 3.0	√		√
Safari 3.0	√	√
Opera 10.5		√	√

< video >定義視頻，比如電影片段或其他視頻流
< video >支持的格式：mp3、wav、ogg
瀏覽器支持的檔案格式：

瀏覽器	mp4	WebM	Ogg
IE	9.0+	×	×
Firefox	×	4.0	3.5+
Chrome	5.0+	6.0+	5.0+
Safari	3.0+	×	×
Opera	×	10.6+	10.5+

實體

可以在 < audio > 和 < / audio > 之間放置文本內容，放置的文本內容在瀏覽器版本不支持< audio >的時候顯示出來，

< source >多個source標簽，瀏覽器會從第一個開始識別，如果第一個不被識別，則會繼續識別第二個；如果第一個識別成功，則會直接播放第一種格式視頻

<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"  controls></audio> 寫法一
<audio controls> 寫法二 在source中選擇一個可以播放的檔案
			<source src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"></source>
			<source src="https://m3.8js.net:99/20200306/62_yongqimianzi.ogg"></source>
			您的瀏覽器版本過低，請使用谷歌瀏覽器！------ 文本在瀏覽器不支持時顯示
</audio>



<video src="123456789.mp4" autoplay controls height='500px' width='280px' loop  muted> </video> 寫法一
<video controls>寫法二 在source中選擇一個可以播放的檔案
	<source src="123456.mp4"></source>
	<source src="123456.ogg"></source>
	您的瀏覽器版本過低，請使用谷歌瀏覽器！------ 文本在瀏覽器不支持時顯示
 </video>

audio可選屬性：

可選屬性	值	描述
autoplay	autoplay	音頻在就緒后馬上播放
controls	controls	顯示操作控制元件，如播放按鈕
loop	loop	回圈播放
muted	muted	靜音
preload	preload	頁面加載時進行加載（預加載）
src	url	要播放的音頻的 URL
autoplay	autoplay	音頻在就緒后馬上播放

video比audio多了

屬性	值	描述
poster	url	URL 視頻正在下載時顯示的影像，直到用戶點擊播放按鈕
autobuffer	autobuffer	設定為瀏覽器緩沖方式，不設定autoply才有效
width	Pilex	設定視頻的寬度
height	Pilex	設定視頻的高度

以audio為例子：

//注意：谷歌需要靜音才能自動播放
<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"
 autoplay
 controls
 loop
 muted>	</audio>

video/audio常用屬性：

例子：ele.playbackRate

屬性	描述
currentSrc	視頻地址
duration	視頻總時長（秒）
currentTime	視頻當前時間（可以設定）秒
volume	當前音量（可以設定）百分比
buffered	當前緩沖量（videoObj.buffered.end(0)）
paused	是否暫停
ended	是否結束
muted	是否靜音
playbackRate	視頻播放速率（可以設定）

video audio API常用方法：

ele.play()

方法	說明
load()	加載
play()	播放
pause()	暫停

audio video事件API：

<body>
	<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3"   controls ></audio>
	<button>二倍速</button>
</body>
<script>
	var ado = document.getElementsByTagName('audio')[0]
	var btn = document.getElementsByTagName('button')[0]
	var falg = false
	btn.onclick = function(){
		//用于觸發onratechange事件
		falg ? ado.playbackRate = 1 : ado.playbackRate = 2
		falg ? this.innerHTML = '二倍速' : this.innerHTML = '正常'
		falg = !falg
	}
	
	ado.onloadstart = function() {
		console.log('onloadstart -- 在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發，')
	}

	ado.ondurationchange= function(){
		console.log('ondurationchange -- 當指定視頻/音頻（audio/video）的時長資料發生變化時觸發')
	}

	ado.onloadedmetadata = function() {
		console.log('onloadedmetadata  -- 事件在指定視頻/音頻（audio/video）的元資料加載后觸發，')
	}

	ado.onloadeddata = function(){
		console.log('onloadeddata  -- 在當前幀的資料加載完成且還沒有足夠的資料播放視頻/音頻（audio/video）的下一幀時觸發')
	}

	ado.onprogress = function(){
		console.log('事件在瀏覽器下載(緩沖完畢)指定的視頻/音頻（audio/video）時觸發，')	
	}

	ado.oncanplay = function(){
		console.log('oncanplay -- 可以開始播放時觸發')
	}

	ado.oncanplaythrough = function(){
		console.log('oncanplaythrough -- 緩沖完成時觸發')
		// e.target.src = '' // 這里這個空的是模擬地址發生鼓掌 觸發下面的 one rror  onemptied
	}

	ado.onended = function() {
		console.log('感謝光看')
	}

	ado.onemptied = function(){
		console.log('onemptied -- 發生故障并且檔案突然不可用時觸發（比如連接意外斷開時），')
	}

	ado.onerror = function(){
		console.log('onerror -- 在檔案加載期間發生錯誤時運行的腳本，')
	}

	ado.onpause = function(){
		console.log('onpause -- 暫停時候觸發(如點擊暫停)')
	}

	ado.onplay = function(){
		console.log('onplay -- 開始播放時觸發(如點擊播放)')
	}

	ado.onplaying = function(){
		console.log('onplaying -- 暫停或者在緩沖后準備重新開始播放時觸發，')
	}

	ado.onratechange = function(){
		console.log('onratechange -- 播放速度發生改變時觸發')
	}

	ado.ontimeupdate = function(){
		console.log('ontimeupdate -- 播放位置改變時觸發 (如拖動進度條) 注意：在沒暫停的情況下進度條動一下就觸發一下' )
	}
	
	ado.onvolumechange = function(){
		console.log('onvolumechange -- 音量發生改動時觸發(包括靜音)')
	}
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/227593.html

標籤：其他

上一篇：位元組跳動的這份《演算法中文手冊》火了，完整版PDF開放下載！不少小伙伴靠這份指南成功掌握了演算法的核心技能，成功拿到了 BATJ等大廠offer。

下一篇：編碼實作楊輝三角

H5 學習筆記（day03)HTML＜audio＞ ＜video＞

< audio > 與< video>標簽

瀏覽器支持：

定義與使用：

audio video事件API：

H5 學習筆記（day03)HTML＜audio＞＜video＞