當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
html5 --- 使用javascript脚本控制媒体播放
生活随笔
收集整理的這篇文章主要介紹了
html5 --- 使用javascript脚本控制媒体播放
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
H5中的標(biāo)簽(<audio…/> 和 <video…/>)對(duì)于JS中的HTMLAudioElement對(duì)象和HTMLVideoElement對(duì)象
對(duì)象有以下幾個(gè)方法:
play(): 播放
pause(): 暫停播放
load(): 重新裝載音頻、視頻
canPlayType(type): 判斷該元素可播放type類型的音頻、視頻
下面是一個(gè)簡(jiǎn)單的音樂(lè)播放器
<title>音樂(lè)播放器</title> </head> <body><h2> 音樂(lè)播放器 </h2><select id='typeSel' style='width:160px'><option value='sequence'>順序播放</option><option value='random'>隨機(jī)播放</option></select><br /><audio id='player' controls>您的瀏覽器不支持audio元素</audio><script type="text/javascript">var musics = ["demo1.ogg","bomb.ogg","arrow.ogg","love.ogg","song.ogg",];var index = 0;var palyType;window.onload = function(){var typeSel = document.getElementById('typeSel');typeSel.onchange = function(){window.playType = typeSel.value;}var player = document.getElementById('player');player.src = musics[index];player.onended = function (){if(playType == 'random'){index = Math.floor(Math.random() * musics.length);palyer.src = musics[index];}else{player.src= musics[++index %musics.length];}player.play();}}</script> </body> </html>
參考《瘋狂HTML5 + CSS3 + JavaScript講義》(第2版) P141~P142
總結(jié)
以上是生活随笔為你收集整理的html5 --- 使用javascript脚本控制媒体播放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Vue导出Excel表格信息
- 下一篇： 甘肃政法学院计算机科学与技术试题,甘肃政