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

baoxl 發布于2019-08-19 17:37 / 3380人閱讀

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

audio和video元素的用法如下：

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

屬性

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

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

事件

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

自定義媒體播放器

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構造函數Audio，可以在任何時候播放音頻。

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

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

GPU云服務器云服務器 html5的注意事項 javascript的dom編程云主機的要點深度學習的要點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78688.html

JavaScript HTML5腳本編程——“歷史狀態管理”的注意要點

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

Rainie 2019-08-19 17:36 評論0 收藏0
JavaScript HTML5腳本編程——“跨文檔消息傳遞”的注意要點

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

TerryCai 2019-08-19 17:33 評論0 收藏0
JavaScript HTML5腳本編程——“原生拖放”的注意要點

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

forsigner 2019-08-19 17:35 評論0 收藏0