搜尋此網誌

2012年9月3日 星期一

[HTML] 影音播放處理

Html 影音處理

在 html 裡要嵌入影音播放的功能的話,絕大部分都採用 embed 標籤。
(It is an HTML5 tag, invalid in HTML 4, but works in all browsers)

syntax:
    <embed src="file path"> </embed>

attribute:
  • autostart : ture, false, 1, 0 | 自動播放
  • autoplay : ture, false, 1, 0 | 自動播放
  • loop : ture, false | 循環播放,預設為不循環
  • controller : ture, false | 播放控制器的顯示,預設為顯示
mini type:
Mini Type 主要為定義影片播放要採用那種播放軟體,如果瀏覽器偵測無該播放外掛,就會提醒下載。
  • wma        application/x-mplayer2
  • wmv        application/x-mplayer2
  • wav         audio/x-wav
  • asf          video/x-ms-asf
  • rm          audio/x-pn-realaudio
  • ra           audio/x-pn-realaudio
  • ram        audio/x-pn-realaudio
  • avi          video/x-msvideo
  • mov        video/quicktime
  • mpg        video/mpeg
  • mpeg      video/mpeg
  • mp3        audio/mpeg
  • mid         audio/mid
syntax:
    <embed src="file path" type="mini type"> </embed>

如想知道更詳細內容可以瀏覽以下連結:
限定支援Html5

目前html5 能直接支援的影音格式有 mp3, mp4, webmogg

audio
audio tag 為html5支援播放音訊檔案的標籤

syntax:
<audio>
<source src="file path" type="mini type" />
</audio>

audio attribute:
  • controls : 顯示播放控制器,如不顯示就不要添加此屬性
  • autoplay : 自動播放, 如不顯示就不要添加此屬性
  • loop : 循環播放, 如不顯示就不要添加此屬性
  • preload : auto, metadata, none | 預先載入音訊
audio tag 支援多層處理,如果遇到無法載入時,會選擇下一個音訊處理

syntax :
<audio>
<source src="file1" type="type1" />
<source src="file2" type="type2" />
<source src="file3" type="type3" />
錯誤訊息,如果以上檔案都無法支援,則會顯示此錯誤訊息。
</audio>


video
video
videotag 為html5支援播放影音檔案的標籤

syntax:
< video >
<source src="file path" type="mini type" />
</ video >

video attribute:
  • controls : 顯示播放控制器,如不顯示就不要添加此屬性
  • autoplay : 自動播放, 如不顯示就不要添加此屬性
  • loop : 循環播放, 如不顯示就不要添加此屬性
  • preload :  auto, metadata, none | 預先載入影音
  • poster : 給予影片播放前顯示的圖片
  • width : 寬度
  • height : 高度
video tag 支援多層處理,如果遇到無法載入時,會選擇下一個影片處理

syntax :
< video >
<source src="file1" type="type1" />
<source src="file2" type="type2" />
<source src="file3" type="type3" />
錯誤訊息,如果以上檔案都無法支援,則會顯示此錯誤訊息。
</ video >