HTML5權威指南筆記：34-使用多媒體

1 使用video元素

video元素可以在網頁裏嵌入視頻內容。

video元素
元素類型	流/短語
允許具有的父元素	任何能包含流或短語元素的元素
局部屬性	autoplay 、preload 、controls 、loop 、poster 、height、width 、muted 、src
內容	source和track元素，以及短語和流內容
標籤用法	開始和結束標籤
是否爲HTML5新增	是
在HTML5中的變化	無
習慣樣式	無

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <video width="360" height="240" src="timessquare.webm"
               autoplay controls preload="none" muted>
            <!--這裏寫瀏覽器不支持video時的處理 -->       
        </video>
    </body>
</html>

video元素的屬性：

autoplay：如果存在，此屬性會使瀏覽器儘可能立刻開始播放視頻。
preload：告訴瀏覽器是否要預先載人視頻。詳情請參見下一節。
controls：除非此屬性存在，否則瀏覽器不會顯示播放控件。
loop：如果存在，此屈性會讓瀏覽器反覆播放視頻。
poster：指定在視頻數據載入時顯示的圖片。詳情請參見1.2節。
height：指定視頻的高度。
width：指定視頻的寬度。
muted：如果此屬性存在，視頻從一開始就會處千靜音狀態。
src：指定要顯示的視頻。詳情請參見1.3節.

1.1 預先加載視頻

preload屬性所允許的值：
1. none：用戶開始播放之前不會載入視頻。
2. metadata：用戶開始播放之前只能載入視頻的元數據（寬度、高度、第一幀、長度和其他此類信息）。
3. auto：請求瀏覽器儘快下載整個視頻。瀏覽器可以忽略這個誚求。這是默認行爲。

1.2 顯示佔位圖像

<!--poster屬性指定佔位圖像-->
<video width="360" height="240" src="timessquare.webm"
       controls preload="none" poster="poster.png">
    Video cannot be displayed
</video>

1.3 指定視頻來源（和格式）

瀏覽器重點支持的視頻格式：

格式	說明	支持
WebM	此格式由谷歌提供支持，目標是創建一個無專利約束，免版稅的格式。MP4/H.264格式一方的人士已經公開尋求使用專利池來對WebM提起訴訟（或者至少讓人們因爲擔心而不再使用它）	Opera 、Chrome 、Firefox
Ogg/Theora	OggTheora是一種開放、免版稅和無專利約束的格式	Opera 、Chrome 、Firefox
MP4/H.264	此格式當前可以免費使用到2015年，因爲許可方已經公開放棄了常規的分發收費計劃	Internet Explorer 、Chrome 、Safari

使用source元素來指定格式

source元素
元素類型	無
允許具有的父元素	無
局部屬性	video 、audio
內容	src 、type 、media
標籤用法	虛元素形式
是否爲HTML5新增	是
在HTML5中的變化	無
習慣樣式	無

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <video controls width="360" height="240">
            <source src="timessquare.webm" type="video/webm" />
            <source src="timessquare.ogv" type="video/ogg" />
            <source src="timessquare.mp4" type="video/mp4" />
            Video cannot be displayed
        </video>
    </body>
</html>

1.4 track元素

track元素提供了一套視頻相關內容的實現機制。這些內容包括字幕、說明和章節標題。但目前還沒有哪一種主流瀏覽器支持這個元素咒

track元素
元素類型	無
允許具有的父元素	video 、audio
局部屬性	kind 、src 、srclang 、label 、default
內容	無
標籤用法	虛元素形式
是否爲HTML5新增	是
在HTML5中的變化	無
習慣樣式	無

2 使用audio 元素

audio元素允許你在HTML文檔裏嵌入音頻內容。

audio元素
元素類型	流／短語
允許具有的父元素	任何能包含流或短語元素的元素
局部屬性	autoplay 、preload 、controls 、loop 、muted 、src
內容	source和track元素，以及短語和流內容
標籤用法	開始和結束標籤
是否爲HTML5新增	是
在HTML5中的變化	無
習慣樣式	無

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <audio controls autoplay>
            <source src="mytrack.ogg" />
            <source src="mytrack.mp3" />
            <source src="mytrack.wav" />            
            Audio content cannot be played
        </audio>
    </body>
</html>

3 通過DOM 操作嵌入式媒體

3.1 獲得媒體信息

HTMLMediaElement對象的基本成員：

成員	說明	返回
autoplay	獲取或設置autoplay屬性是否存在	布爾值
canPlayType(<type>)	獲取瀏覽器能否播放特定MIME類型的提示	字符串
currentSrc	獲取當前的來源	字符串
controls	獲取或設置controls屬性是否存在	布爾值
defaultMuted	獲取或設置muted屬性一開始是否存在	布爾值
loop	獲取或設置loop屬性是否存在	布爾值
preload	獲取或設置preload屬性的值	字符串
src	獲取或設置src屬性的值	字符串
volume	獲取或設置音量，範圍從0.0到1.0	數值

HTMLVideoElement對象定義的屬性

成員	說明	返回
height	獲取或設置height屬性的值	數值
poster	獲取或設置poster屬性的值	字符串
videoHeight	獲取視頻的原始高度	數值
videoWidth	獲取視頻的原始寬度	數值
width	獲取或設置width屬性的值	數值

例子：獲取媒體元素的基本信息

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            table {border: thin solid black; border-collapse: collapse;}
            th, td {padding: 3px 4px;}
            body > * {float: left; margin: 2px;}
        </style>
    </head>
    <body>
        <video id="media" controls width="360" height="240" preload="metadata">
            <source src="timessquare.webm"/>
            <source src="timessquare.ogv"/>
            <source src="timessquare.mp4"/>
            Video cannot be displayed
        </video>
        <table id="info" border="1">
            <tr><th>Property</th><th>Value</th></tr>
        </table>
        <script>
            var mediaElem = document.getElementById("media");
            var tableElem = document.getElementById("info");

            var propertyNames = ["autoplay", "currentSrc", "controls", "loop", "muted",
                                 "preload", "src", "volume"];

            for (var i = 0; i < propertyNames.length; i++) {
                tableElem.innerHTML +=
                    "<tr><td>" + propertyNames[i] + "</td><td>" +
                    mediaElem[propertyNames[i]] + "</td></tr>";
            }
        </script>
    </body>
</html>

3.2 評估回放能力

canPlayType屬性所允許的值：

＂＂（空字符串）：瀏覽器無法播放該媒體類型。
maybe：瀏覽器也許可以播放該媒體類型。
probably：瀏覽器有相當把握能播放該媒體類型。

例子：使用canPlayType方法判斷瀏覽器支持的媒體類型

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            table {border: thin solid black; border-collapse: collapse;}
            th, td {padding: 3px 4px;}
            body > * {float: left; margin: 2px;}
        </style>
    </head>
    <body>
        <video id="media" controls width="360" height="240" preload="metadata">
            Video cannot be displayed
        </video>
        <table id="info" border="1">
            <tr><th>Property</th><th>Value</th></tr>
        </table>
        <script>
            var mediaElem = document.getElementById("media");
            var tableElem = document.getElementById("info");

            var mediaFiles = ["timessquare.webm", "timessquare.ogv", "timessquare.mp4"];
            var mediaTypes = ["video/webm", "video/ogv", "video/mp4"];

            for (var i = 0; i < mediaTypes.length; i++) {
                var playable = mediaElem.canPlayType(mediaTypes[i]);
                if (!playable) {
                    playable = "no";
                }

                tableElem.innerHTML +=
                    "<tr><td>" + mediaTypes[i] + "</td><td>" + playable + "</td></tr>";

                if (playable == "probably") {
                    mediaElem.src = mediaFiles[i];
                }
            }
        </script>
    </body>
</html>

3.3 控制媒體回放

HTMLMediaElement對象的回放成員：

成員	說明	返回值
currentTime	返回媒體文件當前的回放點	數值
duration	返回媒體文件的總時長	數值
ended	如果媒體文件已經播放完畢則返回true	布爾值
pause()	暫停媒體回放	void
paused	如果回放暫停就返回true , 否則返回false	布爾值
play()	開始回放媒體	void

例子：用HTMLMediaElement屬性獲取媒體回放詳情

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            table {border: thin solid black; border-collapse: collapse;}
            th, td {padding: 3px 4px;}
            body > * {float: left; margin: 2px;}
            div {clear: both;}
        </style>
    </head>
    <body>
        <video id="media" controls width="360" height="240" preload="metadata">
            <source src="timessquare.webm"/>
            <source src="timessquare.ogv"/>
            <source src="timessquare.mp4"/>
            Video cannot be displayed
        </video>
        <table id="info" border="1">
            <tr><th>Property</th><th>Value</th></tr>
        </table>
        <div>
            <button id="pressme">Press Me</button>
        </div>
        <script>
            var mediaElem = document.getElementById("media");
            var tableElem = document.getElementById("info");

            document.getElementById("pressme").onclick = displayValues;

            displayValues();

            function displayValues() {
                var propertyNames = ["currentTime", "duration", "paused", "ended"];
                tableElem.innerHTML = "";
                for (var i = 0; i < propertyNames.length; i++) {
                    tableElem.innerHTML +=
                        "<tr><td>" + propertyNames[i] + "</td><td>" +
                        mediaElem[propertyNames[i]] + "</td></tr>";
                }
            }
        </script>
    </body>
</html>

HTML5權威指南筆記：34-使用多媒體

1 使用video元素

1.1 預先加載視頻

1.2 顯示佔位圖像

1.3 指定視頻來源（和格式）

1.4 track元素

2 使用audio 元素

3 通過DOM 操作嵌入式媒體

3.1 獲得媒體信息

3.2 評估回放能力

3.3 控制媒體回放

內聚性和耦合性的類型

SQL Server 2008編程入門經典筆記：表連接

SQL Server 2008編程入門經典筆記：視圖

HTML5權威指南筆記：7-創建HTML文檔

自頂向下語法分析方法：提取左公共因子

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結