iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

Javascript 犀牛本-濃縮再濃縮 提煉再提煉系列 第 25

Day 25: JavaScript操作媒體與圖形 (Part 1)

  • 分享至 

  • xImage
  •  
  • HTML5有新增了<audio><video>兩個跟媒體相關的標籤
  • 若tag裡有controls屬性則會顯示一組播放控制項。
  • <audio><video>
    • play()與pause()來進行撥放暫停
    • 設定currentTime特性來跳到指定時間點
    • volume設定音量(0最小聲/1最大聲)
    • muted特性設為true則會變靜音
    • ...
      理論上應該用以下的方式,就要能運作
      <audio src="music.mp3" />
      <video src="movie.mov" width=500 height=500 />
      但目前各家瀏覽器支援標準尚未統一,所以還是需要用以下方式撰寫(需定義解碼格式)
<audio>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music_A.ogg" type="audio/ogg" codec="vorbis">
</audio>
<vedio width=500 height=500 controls preload>
    <source src="movie.webm" type='vedio/webm; codecs:"vp8, vorbis"'>
</vedio>

在支援<audio><video>的瀏覽器並不會render元素內容,但在不支援的瀏覽器下會render元素內容,所以可以在元素裡置入一些備案(如圖片或字串)

若想要知道是否支援載入格式可使用canPlayType()的方法來確認

var _audio=  new Audio();
if(_audio.canPlayType('audio/mp3')){
    _audio.src="music.mp3";
    _audio.play();
}

上一篇
Day 24: client-side storage
下一篇
Day 26: JavaScript操作媒體與圖形 (Part 2)
系列文
Javascript 犀牛本-濃縮再濃縮 提煉再提煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言