iT邦幫忙

DAY 7
1

只是路過 HTML5 系列 第 7

HTML Audio/Video Properties(1)

  • 分享至 

  • xImage
  •  

參考:
http://www.w3schools.com/tags/ref_av_dom.asp

HTML5 DOM 為<audio> 和<video>
提供了Methods(方法)、Properties(屬性)、和Events(事件)。

今天筆記的是Properties(屬性)如下:

audioTracks media多個音軌之間進行切換。
autoplay 設置或傳回media是否自動播放
buffered (Time Ranges Object) 回傳緩衝時間
controller
controls 設置或傳回media是否顯示播放控制列表
crossOrigin 跨域設置或傳回media設定
audioTracks 在媒體檔案上的多個音軌之間進行切換。

例如:媒體檔案可以包含多個不同語言的音軌。
audioTracks 屬性適用於 Video 和 Audio 元素。

function selectLang() {
    var myVideo = document.getElementById("videoTag1");
    
    if (myVideo.audioTracks.length > 1) {
        for (var i = 0; i <br></br><br></br>
參考: 如何選取不同語言的音軌<br></br><a href="http://msdn.microsoft.com/zh-tw/library/windows/apps/hh452774.aspx">http://msdn.microsoft.com/zh-tw/library/windows/apps/hh452774.aspx</a><br></br><br></br><br></br>
★<strong>autoplay</strong> 設置或傳回media是否自動播放<br></br><br></br>
* 設置media自動播放<br></br>testVid=document.getElementById("video1");
testVid.autoplay=true;
testVid.load();<br></br>
* 設置media取消自動播放<br></br>testVid=document.getElementById("video1");
testVid.autoplay=false;
testVid.load();<br></br>
* testVid.autoplay 獲取media是否自動播放(回傳Boolean)<br></br>testVid=document.getElementById("video1");
alert(testVid.autoplay);<br></br><br></br>
★<strong>buffered</strong> (Time Ranges Object) 回傳緩衝時間 length/start(index)/end(index)<br></br><br></br>testVid=document.getElementById("video1");
alert("Start: " + testVid.buffered.start(0)
+ " End: " + testVid.buffered.end(0));<br></br><br></br>
★<strong>controller</strong><br></br><br></br>testVid=document.getElementById("video1");
alert("Controller: " + testVid.controller);<br></br><br></br>
★<strong>controls</strong> 設置或傳回media是否顯示播放控制列表<br></br><br></br>
*設置顯示播放控制列表<br></br>testVid=document.getElementById("video1");
testVid.controls=true;
testVid.load();<br></br>
*設置隱藏播放控制列表<br></br>testVid=document.getElementById("video1");
testVid.controls=false;
testVid.load();<br></br>
* testVid.controls用來獲得目前是否有顯示播放控制列表,回傳Boolean<br></br>testVid=document.getElementById("video1");
alert(testVid.controls);<br></br><br></br>
★<strong>crossOrigin</strong> CORS Cross Origin Resource Sharing 跨域設置或傳回media設定<br></br><br></br><br></br>
其他屬性還有...<br></br><br></br>
currentSrc<br></br>
currentTime<br></br>
defaultMuted<br></br>
defaultPlaybackRate<br></br>
duration<br></br>
ended<br></br>
error<br></br>
loop<br></br>
mediaGroup<br></br>
muted<br></br>
networkState<br></br>
paused<br></br>
playbackRate<br></br>
played<br></br>
preload<br></br>
readyState<br></br>
seekable<br></br>
seeking<br></br>
src<br></br>
startDate<br></br>
textTracks<br></br>
videoTracks<br></br>
volume<br></br><br></br>
一共有29個...超多的...囧

上一篇
HTML Audio/Video Methods
下一篇
HTML Audio/Video Properties(2)
系列文
只是路過 HTML5 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言