當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
html5 --- 使用javascript脚本控制媒体播放
生活随笔
收集整理的這篇文章主要介紹了
html5 --- 使用javascript脚本控制媒体播放
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
H5中的標簽(<audio…/> 和 <video…/>)對于JS中的HTMLAudioElement對象和HTMLVideoElement對象
對象有以下幾個方法:
play(): 播放
pause(): 暫停播放
load(): 重新裝載音頻、視頻
canPlayType(type): 判斷該元素可播放type類型的音頻、視頻
下面是一個簡單的音樂播放器
<title>音樂播放器</title> </head> <body><h2> 音樂播放器 </h2><select id='typeSel' style='width:160px'><option value='sequence'>順序播放</option><option value='random'>隨機播放</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
總結
以上是生活随笔為你收集整理的html5 --- 使用javascript脚本控制媒体播放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue导出Excel表格信息
- 下一篇： 甘肃政法学院计算机科学与技术试题,甘肃政