国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript HTML5腳本編程——“媒體元素”的注意要點

baoxl / 3385人閱讀

摘要：事件除了大量屬性之外，這兩個媒體元素還可以觸發(fā)很多事件。下表列出了媒體元素相關(guān)的事件。這兩個媒體元素都有一個方法，該方法接收一種格式編解碼器字符串，返回或空字符串。

audio和video元素的用法如下：

因為并非所有瀏覽器都支持所有媒體格式，所以可以指定多個不同的媒體來源。為此，不用在標簽中指定src屬性，而是要像下面這樣使用一或多個元素。
屬性

點擊這里查詢video標簽接口的兼容性

下表列出了這兩個元素共有的屬性，通過這些屬性可以知道媒體的當前狀態(tài)。

事件

除了大量屬性之外，這兩個媒體元素還可以觸發(fā)很多事件。這些事件監(jiān)控著不同的屬性的變化，這些變化可能是媒體播放的結(jié)果，也可能是用戶操作播放器的結(jié)果。下表列出了媒體元素相關(guān)的事件。

自定義媒體播放器

DOM部分：


    

        
    

    

        
        0/0

js部分：

var player = document.getElementById("player"),
    btn = document.getElementById("video-btn"),
    curtime = document.getElementById("curtime"),
    duration = document.getElementById("duration");

btn.onclick = function() {
    if (player.paused) {
        player.play();
        btn.value = "Pause";
        duration.innerHTML = player.duration;
    } else {
        player.pause();
        btn.value = "Play";
    }
};

player.onended = function() {
    btn.value = "Play";
};

var x = setTimeout(function timing() {
    curtime.innerHTML = player.currentTime;
    var y = setTimeout(timing, 100);
    y = null;
}, 100);
x = null;
檢測編碼器的支持情況

有一個JavaScript API能夠檢測瀏覽器是否支持某種格式和編解碼器。這兩個媒體元素都有一個

canPlayType()方法，該方法接收一種格式/編解碼器字符串，返回"probably"、"maybe"或""（ 空字符串）。

空字符串是假值，因此可以像下面這樣在if語句中使用canPlayType()：

if (audio.canPlayType("audio/mpeg")){
    //進一步處理
}

canPlayType()傳入了一種MIME類型，則返回值很可能是"maybe"或空字符串。這是因為媒體文件本身只不過是音頻或視頻的一個容器，而真正決定文件能否播放的還是編碼的格式。在同時傳入MIME類型和編解碼器的情況下，可能性就會增加，返回的字符串會變成"probably"。下面來看幾個例子。

var audio = document.getElementById("audio-player");

//很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
    //進一步處理
}

//可能是"probably"
if (audio.canPlayType("audio/ogg; codecs="vorbis"")){
    //進一步處理
}

注意，編解碼器必須用引號引起來才行。下表列出了已知的已得到支持的音頻格式和編解碼器。

Audio類型

原生的JavaScript構(gòu)造函數(shù)Audio，可以在任何時候播放音頻。

var audio = new Audio("lalala.mp3");
audio.autoplay = true;
audio.loop = true;

創(chuàng)建新的Audio實例即可開始下載指定的文件。下載完成后，調(diào)用play()就可以播放音頻。 在iOS中，調(diào)用play()時會彈出一個對話框，得到用戶的許可后才能播放聲音。如果想在一段音頻播放后再播放另一段音頻，必須在onfinish事件處理程序中調(diào)用play()方法。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78688.html

相關(guān)文章

  • JavaScript HTML5腳本編程——“歷史狀態(tài)管理”的注意要點

    摘要：歷史狀態(tài)管理是現(xiàn)代應(yīng)用開發(fā)中的一個難點。通過更新對象為管理歷史狀態(tài)提供了方便。而通過狀態(tài)管理，能夠在不加載新頁面的情況下改變?yōu)g覽器的。在和中，傳遞給或的狀態(tài)對象中不能包含元素。還支持一個屬性，它返回當前狀態(tài)的狀態(tài)對象。 歷史狀態(tài)管理是現(xiàn)代Web應(yīng)用開發(fā)中的一個難點。在現(xiàn)代Web應(yīng)用中，用戶的每次操作不一定會打開一個全新的頁面，因此后退和前進按鈕也就失去了作用，導(dǎo)致用戶很難在不同狀態(tài)間切...

    Rainie 評論0 收藏0

  • JavaScript HTML5腳本編程——“跨文檔消息傳遞”的注意要點

    摘要：跨文檔消息傳送，有時候也簡稱為，指的是來自不同域的頁面間傳遞消息。接收到消息時，會觸發(fā)對象的事件。接受到消息后驗證發(fā)送窗口的來源是至關(guān)重要的。基本的檢測模式如下。 跨文檔消息傳送（cross-document messaging），有時候也簡稱為XDM，指的是來自不同域的頁面間傳遞消息。例如，www.wrox.com域中的一個頁面與一個位于內(nèi)嵌框架中的p2p.wrox.com域中的頁面...

    TerryCai 評論0 收藏0

  • JavaScript HTML5腳本編程——“原生拖放”的注意要點

    摘要：在中，唯一有效的放置目標是文本框。以的實例為基礎(chǔ)指定了拖放規(guī)范。觸發(fā)事件后，隨即會觸發(fā)事件，而且在元素被拖動期間會持續(xù)發(fā)送該事件。指定一副圖像，當拖動發(fā)生時，顯示在光標下方。 最早在網(wǎng)頁中引入JavaScript拖放功能是IE4。當時，網(wǎng)頁中只有兩種對象可以拖放：圖像和某些文本。在IE4中，唯一有效的放置目標是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且?guī)缀蹙W(wǎng)頁中的任何元...

    forsigner 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<