成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript HTML5腳本編程——“媒體元素”的注意要點(diǎn)

baoxl / 3435人閱讀

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

audio和video元素的用法如下：

因?yàn)椴⒎撬袨g覽器都支持所有媒體格式，所以可以指定多個(gè)不同的媒體來(lái)源。為此，不用在標(biāo)簽中指定src屬性，而是要像下面這樣使用一或多個(gè)元素。
屬性

點(diǎn)擊這里查詢video標(biāo)簽接口的兼容性

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

事件

除了大量屬性之外，這兩個(gè)媒體元素還可以觸發(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;
檢測(cè)編碼器的支持情況

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

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

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

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

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

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

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

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

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

Audio類型

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

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

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

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

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

相關(guān)文章

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

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

    Rainie 評(píng)論0 收藏0

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

    摘要：跨文檔消息傳送，有時(shí)候也簡(jiǎn)稱為，指的是來(lái)自不同域的頁(yè)面間傳遞消息。接收到消息時(shí)，會(huì)觸發(fā)對(duì)象的事件。接受到消息后驗(yàn)證發(fā)送窗口的來(lái)源是至關(guān)重要的?；镜臋z測(cè)模式如下。 跨文檔消息傳送（cross-document messaging），有時(shí)候也簡(jiǎn)稱為XDM，指的是來(lái)自不同域的頁(yè)面間傳遞消息。例如，www.wrox.com域中的一個(gè)頁(yè)面與一個(gè)位于內(nèi)嵌框架中的p2p.wrox.com域中的頁(yè)面...

    TerryCai 評(píng)論0 收藏0

  • JavaScript HTML5腳本編程——“原生拖放”的注意要點(diǎn)

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

    forsigner 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<