iT邦幫忙

DAY 8
2

只是路過 HTML5 系列 第 8

HTML Audio/Video Properties(2)

  • 分享至 

  • xImage
  •  

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

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

Properties實在是蠻多的~ 就分篇介紹。

原本我是按照w3schools的排序(依字母順序)筆記,
但發現有些屬性很類似,可以拿出來比較,就被我放在一起分享了:)

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

src 傳回media的URL
currentSrc 傳回目前media的URL
currentTime 設置或傳回目前播放的時間位置(單位:秒)
defaultMuted 設置或傳回預設是否為靜音
muted 設置或傳回是否為靜音
defaultPlaybackRate 預設置或傳回media播放倍速
playbackRate 播放時,可在media播放期間設定倍速
duration 傳回文件的總播放時間(長度)
src 設置或傳回media的URL

*設置media的URL

testVid=document.getElementById("video1");
testVid.src="movie.ogg";

*傳回media的URL

testVid=document.getElementById("video1");
alert(testVid.currentSrc);

設置URL範例: http://jsfiddle.net/iamya/4dDhA/3/

currentSrc 傳回目前media的URL

寫了測試檔來實驗,發現src和currentSrc 傳回的結果,不是一樣嗎???
後來找到邦友fillano高手的文章,真是感謝! 解決我的疑惑>_<
參考: http://ithelp.ithome.com.tw/question/10055150

文章上提到--
【除了使用src,Media Elements還可以把source標籤當作子物件。
每個source物件有各自的src屬性指到媒體檔案,
在不確定瀏覽器對於媒體類型的支援程度時,
可以同時指定多個不同格式的source,這樣瀏覽器可以挑他支援的格式來播放。
currentSrc在最初是空字串,等到瀏覽器挑了他支援格式的媒體URL,就會在這裡顯示。】

寫的超清楚的><

currentTime 設置或傳回目前播放的時間位置(單位:秒) 回傳Number
*設置目前播放的時間位置

testVid=document.getElementById("video1");
testVid.currentTime=5;

*傳回目前播放的時間位置

testVid=document.getElementById("video1");
alert(testVid.currentTime);

Rewinds the audio file by 30 seconds.

        function rewindAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

Fast forwards the audio file by 30 seconds.

function forwardAudio() {

             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

Restart the audio file to the beginning.

function restartAudio() {
             // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
               }
            }
        }

ref:
使用 JavaScript 控制 Audio 物件
http://msdn.microsoft.com/zh-tw/library/ie/gg589489(v=vs.85).aspx

muted 設置或傳回是否為靜音
*設置播放期間為靜音

testVid=document.getElementById("video1");
testVid.muted=true;

*傳回播放期間是否為靜音

testVid=document.getElementById("video1");
alert(testVid.muted);

defaultMuted 設置或傳回預設是否為靜音
*中斷一切動作,重新開始播放media並設置預設為靜音

testVid=document.getElementById("video1");
testVid.defaultMuted=true;
testVid.load()

*傳回預設是否為靜音

testVid=document.getElementById("video1");
alert(testVid.currentSrc);

0
defaultPlaybackRate 預設置或傳回media播放倍速

testVid=document.getElementById("video1");
alert(testVid.currentSrc);

1
playbackRate 播放時,可在media播放期間設定倍速

testVid=document.getElementById("video1");
alert(testVid.currentSrc);

2

defaultPlaybackRate和playbackRate都會回傳浮點數,
1.0正常速度
0.5一半速度(slower)
2.0雙倍數度(faster)
-1.0倒轉 正常速度
-0.5倒轉 一半速度

其他屬性還有...

duration
ended
error
loop
mediaGroup
networkState
paused
played
preload
readyState
seekable
seeking
startDate
textTracks
videoTracks
volume


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

尚未有邦友留言

立即登入留言