【HTML學習】第五章富媒體

5.2 HTML的視頻之路

HTML5不僅讓我們能夠更具語義，而且使得向網站添加視頻就像ABC一樣簡單。所需要的簡單標記爲：

<video src="gordoinspace.webm"></video>

在默認情況下，瀏覽器不會顯示任何播放控件，用戶需要打開上下文菜單來使用這一標記播放視頻。如果未正確設置該視頻的width和height，在瀏覽器計算尺寸期間，也會在頁面加載時看到一個干擾圖像一閃而過。而且用戶對於他們要看的內容無法進行快進。爲了改進這種狀況，我們可以添加poster和controls特性及其尺寸。

<video src="gordoinspace.webm" width="720" height="405" poster="poster.jpg" controls>
</video>

HTML5中定義的標準的全局特性有：

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
itemid
itemprop

autoplay（自動播放）：告訴瀏覽器，視頻一旦下載便開始播放。
controls（控件）：顯示瀏覽器原生的內置控件。基本控件包括：播放/暫停按鈕、定時器、音量控制以及時間刷等。
crossorigin（跨源域共享）：允許或禁止使用CORS對該視頻進行跨域共享。
height（高度）：標明視頻的高度。
loop（循環）：告訴瀏覽器，視頻結束後循環播放。
mediagroup（媒體組）：通過創建一個媒體控制器，可以將多個媒體元素鏈接在一起。因此，你可以對多個視頻或視頻與音頻進行同步。
muted（靜音）：讓作者指定視頻開始時是否靜音。
poster（貼畫）：標識一幅靜態圖像的位置以作爲一幅定格幀。
preload（預載）：讓作者能夠通知瀏覽器頁面加載後是否立即下載該視頻。preload已經代替了autobuffer（自動緩衝）特性。
src（源地址）：標識視頻文件的位置（注意：當有子元素source時，該特性不是必需的）。
width（寬度）：標識視頻的寬度。

loop、autoplay、preload以及controls都是Boolean特性，意即若代碼中有此關鍵字，則其值爲true。

5.2.1 視頻格式

視頻容器與編解碼器
我們用以關聯視頻的文件擴展名有.mp4、.avi以及.flv等，它們本身並不是編解碼器，而是一種容器格式。這如同zip或rar文件能夠在其中容納數種文件類型一樣，視頻容器格式所做的也是同樣的事情。應該將容器格式視爲”如何存儲數據“，而將編解碼器視爲”如何理解和播放數據“。

爲了實現跨瀏覽器的HTML5視頻，我們需要了解三種容器格式：
WebM：是加入HTML5家族的最新容器格式。
Ogg：是一種無任何專利約束的開放標準容器格式。Ogg的視頻編解碼器叫做Theora，配套的音頻編解碼器爲Vorbis。
MPEG-4：基於Apple的QuickTime容器格式MOV，它關聯的文件擴展名爲.mp4和.m4v。MPEG4的消極面試專利障礙。

我們已經介紹了感興趣的容器格式，但是具體的編解碼器又是社麼呢？我們關注以下三種：
VP9：是一個開放的視頻編解碼器，沒有任何已知的專利阻礙，其視頻質量類似於H.264，預計在未來幾年將會得到進一步發展。
Theora：Theora等同於VP3，一般和Ogg容器一起使用，但它的質量遠低於VP8和H.264。
H.264：由MPEG團隊開發，其設計目標是在比以前的標準還低的比特率上創建高質量的視頻。它可以和大多數容器格式一起使用，但其不足是受MPEG-LA專利保護限制。

5.2.2 瀏覽器支持

5個主流瀏覽器全部支持HTML5的video。

5.2.3 添加視頻源

對於目前的video元素，我們只能添加一個src特性。我們可以用JavaScript來檢測瀏覽器的支持情況，並用相應的文件對之進行服務。不過，更保險的辦法是使用source元素。
source讓我們能夠指定用於媒體元素的多個可選視頻。這是一個不可見元素，意即瀏覽器不會渲染它的內容，以指示它在文檔中的可見性外觀。

<video poster="poster.jpg" controls width="720" height="405">
    <source src="gordoinspace.mp4" type="video/mp4">
    <source src="gordoinspace.webm" type="video/vp8">
    <source src="gordoinspace.ogv" type="video/ogg">
    Download <a href="gordoinspace.webm">Gordo in Space </a> the movie
</video>

注意：對於Ogg的視頻指定type特性時，必須將它指定爲video/ogg，而不是video/ogv，這個特別會引起錯誤，因爲該文件類型的擴展名爲.ogv。

瀏覽器將播放第一個可理解格式的視頻。舉個簡單的例子，chrome中，它能夠播放所有格式，故它會播放上例中的MP4文件。如果瀏覽器不能理解視頻的類型，會簡單地跳轉到下一個source元素知道發現一個可以理解的類型爲止。所以，source元素的順序相當重要：MP4必須作爲第一個，WebM應該放在第二位，這是由於它的質量高於Ogg，Ogg則放在第三位。

再談老朋友Flash

但是對於舊版IE，我們需要信賴老朋友Flash先生來幫助我們支持。

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="720" height="429">
    <param name="movie" value="player.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="flashvars" value="file=gordoinspace.mp4&image=poster.jpg" />
    <embed type="application/x-shockwave-flash" id="player2" name="player2" src="player.swf" width="720" height="429" allowscriptaccess="always" allowfullscreen="true" flashvars="file=file=gordoinspace.mp4&image=poster.jpg" />
</object>

將Flash的object與前面示例結合在一起，我們終於有了一個可以訪問、跨瀏覽器的、原生的解決方案。

5.2.4 track元素

source並不是可用於原生視頻的唯一元素，還有一個後來加入HTML5規範的元素track，其目的是讓作者能夠爲視頻或音頻指定一個外部的同步軌道或者數據。track只能用作video或audio媒體元素的子元素，其用法：

<video src="gordoinspace.webm" width="720" height="405" poster="poster.jpg" controls>
    <track kind="subtitles" src="gordo_subtitles.vtt" />
</video>

track可以採用以下特性（若未指定，默認使用subtitles）：
default（默認）：以其中使用該特性的track元素爲默認軌道，除非用戶的喜好已指示有另一種更合適的track。
kind（種類）：描述track元素所提供的信息類型，它可以採用以下的值：

subtitles（字幕）：對話的副本或翻譯文本
captions（簡短說明）：類似於subtitles，但也可以包含聲音效果或其他相關音頻信息。適用於音頻不可用時。
descriptions（描述）：爲視頻不可用時提供該媒體元素的一個文本描述。
chapters（章節）：定義章節標題，以便對媒體元素的內容進行導航。
metadata（元數據）：包括媒體元素的信息和內容，默認情況下不會顯示給用戶。如果願意，可以用JavaScript暴露這些信息。

label（標籤）：爲文本軌道定義一個用戶可讀的標題。
src（源地址）：文本軌道數據的URL。
srclang（源語言）：文本軌道數據的語言。
由於它太新了，目前尚未得到任何瀏覽器的支持。在此之前，最好的變通方法就是使用JavaScript填充材料來提供支持。

WebVTT
這是一種用於標記外部文件軌道的文件格式，改革是以前叫WebSRT，目前頗有爭議，而且也是最新的。

5.2.6 卸掉沉重的負擔

如果想編寫並記住實現跨瀏覽器視頻的所有代碼，這看起來似乎很難，但是可以通過工具進行實現。
1.JW Player
2.Player
3.MediaElement.js
4.VideoJS
5.SublimeVideo

5.3 音頻

以下是給頁面添加audio的標記：

<audio src="gordo_interview.ogg" controls></audio>

正如你能看到的，它的工作方式與video十分相似，並且共享了一些同樣的特性和API。
audio和video公用的特性有：

src
controls
autoplay
preload
loop
muted
crossorigin
mediagroup

不需要在HTML中指定audio的寬度和高度。

5.3.1 音頻編解碼器

Vorbis：這是一個無任何專利限制的開放編解碼器，它通常被封裝在Ogg容器中，但也可以封裝在 WebM或其他容器中。
MP3：是一個已標準化的受專利保護的編解碼器。
AAC：它有專利保護，與MP3不同的是可以定義多個配置文件。
WAV：它是PC上存儲音頻的標準。WAV文件一般都很大，因爲他們不適合流式音頻。
MP4：主要用於視頻，但它也可以用於音頻。

5.4 Canvas

5.4.1 基於像素的自由

與SVG不同，canvas是基於像素（光柵）的，因此可以快速渲染但難以縮放。這也意味着如果想要修改則需要重繪整個畫布。canvas可以用來創建遊戲、圖表、圖形和交互圖形等。

5.4.2 添加/實現canvas

爲了在文檔中實現canvas並開始繪圖，我們需要做兩件基本的事情。
（1）在文檔中添加一個canvas元素
（2）使用JavaScript獲得上下文
向文檔中添加canvas與添加其他任何元素一樣。

<!DOCTYPE HTML>
<html lang="en_UK">
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
    </head>
<body>
    <canvas width="640" height="480" id="outerspace"></canvas> 
</body>
</html>

爲了定義繪畫區域，在HTML中需要明確設置canvas的寬度與高度。如果不設置，默認爲300*150px。爲其提供一個id讓我們能夠在腳本中對該元素進行定位。
默認情況下，canvas是透明的，我們需要使用JavaScript，才能進行真正炫耀我們的繪畫技能。

~~1.2D上下文~~

<script>
var canvas=document.getElementById('outerspace');
var ctx=canvas.getContext('2d');
</script>

爲了得到更好的可訪問性，我們可以再往前進一步，並使用漸進式JavaScript，以防止不支持的瀏覽器出現錯誤，這個只需要加一個簡單的if語句就可以取得這一效果。

<script>
var canvas=document.getElementById('outerspace');
if(canvas.getContext){
    var ctx=canvas.getContext('2d');
}else{
    //canvas not supported do something
}
</script>

現在，我們將開始繪畫。爲了輕鬆一些，我們先從一個簡單的矩形開始。爲此我們使用fillRect（填充矩形）方法，並聲明一些特性作爲x軸的起始位置、y軸的起始位置、寬度和高度。聲明座標時，用於canvas的網絡（或座標）空間的起始點是左上角，正方向爲x軸向右，y軸向下。

<script>
var canvas=document.getElementById('outerspace');
if(canvas.getContext){
    var ctx=canvas.getContext('20');
    //set the size and shape (x,y,width,height)
    ctx.fillRect(180,180,240,120);
}
</script>

~~最後我們添加一個onload函數，並在文檔中添加了腳本。~~

canvas學習對於我來說目前並不是很重要，所以這裏我就不進行深入學習，僅對基礎操作進行記錄即可。（以下摘自W3CSchool內容）

創建一個畫布（Canvas）

一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪製.

注意: 默認情況下 <canvas> 元素沒有邊框和內容。

<canvas>簡單實例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 標籤通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小.

提示:你可以在HTML頁面中使用多個 <canvas> 元素.

使用 style 屬性來添加邊框:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的瀏覽器不支持 HTML5 canvas 標籤。
</canvas>

</body>
</html>

使用 JavaScript 來繪製圖像

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支持 HTML5 canvas 標籤。
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>

實例解析:

首先，找到 <canvas> 元素:

var c=document.getElementById(“myCanvas”);

然後，創建 context 對象：

var ctx=c.getContext("2d");

getContext(“2d”) 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪製一個紅色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

Canvas 座標

canvas 是一個二維網格。

canvas 的左上角座標爲 (0,0)

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。

座標實例

如下圖所示，畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位。鼠標移動的矩形框上，顯示定位座標。

Canvas - 路徑
在Canvas上畫線，我們將使用以下兩種方法：

moveTo(x,y) 定義線條開始座標
lineTo(x,y) 定義線條結束座標

繪製線條我們必須使用到 “ink” 的方法，就像stroke()。
實例
定義開始座標(0,0), 和結束座標 (200,100). 然後使用 stroke() 方法來繪製線條:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

</script>

</body>
</html>

在canvas中繪製圓形, 我們將使用以下方法:

arc(x,y,r,start,stop)
實際上我們在繪製圓形時使用了 “ink” 的方法, 比如 stroke() 或者 fill().
實例

使用 arc() 方法繪製一個圓:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script> 

</body>
</html>

Canvas - 文本

使用 canvas 繪製文本，重要的屬性和方法如下：

font - 定義字體 fil
lText(text,x,y) - 在 canvas 上繪製實心的文本
strokeText(text,x,y) - 在 canvas 上繪製空心的文本

使用 fillText():
實例

使用 “Arial” 字體在畫布上繪製一個高 30px 的文字（實心）：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

</script>

</body>
</html>

使用 strokeText():

實例

使用 “Arial” 字體在畫布上繪製一個高 30px 的文字（空心）：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

</script>

</body>
</html>

Canvas - 漸變

漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來設置Canvas漸變：

createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數使用座標來描述，可以是0至1.

使用漸變，設置fillStyle或strokeStyle的值爲漸變，然後繪製形狀，如矩形，文本，或一條線。

使用 createLinearGradient():
實例

創建一個線性漸變。使用漸變填充矩形:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

使用 createRadialGradient():
實例

創建一個徑向/圓漸變。使用漸變填充矩形：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>

Canvas - 圖像

把一幅圖像放置到畫布上, 使用以下方法:

drawImage(image,x,y)
使用圖像:

實例

把一幅圖像放置到畫布上:

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

</body>
</html>

5.5 SVG

SVG不是HTML5的一部分，但是HTML5可以嵌入內聯SVG，這也是我們能在這裏找到SVG的原因。

5.5.1 向量的威力

顧名思義，SVG文件是基於向量的，意即它們能夠被縮放，而不會損失圖像質量。它可以實現canvas的許多效果。一個主要的區別是，每個SVG元素都會成爲 DOM的一部分，這樣每個對象都能夠被索引，並提供了一個可訪問性更好的解決方案。
canvas和SVG的選擇
SVG內容可以是靜態的、活動的或交互的。這意味着SVG相對可訪問的，但對於較爲複雜的形狀，可能會降低渲染速度。
相比較之下，canvas使用JavaScriptAPI，這讓我們能夠進行程序繪圖。因爲沒有相應的DOM節點，你只能專注於繪製，而不能隨着圖像複雜度的增加而取得同樣的性能。也可以將結果保存爲PNG或JPG圖像。
SVG比較適用於數據圖表和分辨率獨立的圖形、動畫交互的用戶界面或矢量圖像編輯。canvas適合於遊戲、位圖圖像處理、光柵圖形以及圖像分析。
由於SVG在整體HTML5相對於我來說不是重點，所以這塊就不貼大量代碼解釋了。這裏只演示SVG的一般使用方法——

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

【HTML學習】第五章富媒體

5.2 HTML的視頻之路

5.2.1 視頻格式

5.2.2 瀏覽器支持

5.2.3 添加視頻源

5.2.4 track元素

5.2.6 卸掉沉重的負擔

5.3 音頻

5.3.1 音頻編解碼器

5.4 Canvas

5.4.1 基於像素的自由

5.4.2 添加/實現canvas

創建一個畫布（Canvas）

使用 JavaScript 來繪製圖像

Canvas 座標

Canvas - 文本

Canvas - 漸變

Canvas - 圖像

5.5 SVG

5.5.1 向量的威力

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

Nginx R31 doc-13-Limiting Access to Proxied HTTP Resources 訪問限流

python包：pandas

中外程序員到底有啥區別？

Python數據分析與挖掘實戰（5章）

一、什麼是Docker

C++文件/流

二、Docker 組件

揹包九講一 01揹包

今天！通義靈碼在北京、成都、杭州三城開講啦

【CSS學習】CSS 背景

數據挖掘入門-Task01

【HTML學習】第五章富媒體

DataWhale-Task04 數學建模

【正則表達式學習】元字符

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

linux以太網驅動總結

【HTML學習】第五章 富媒體

5.2 HTML的視頻之路

5.2.1 視頻格式

5.2.2 瀏覽器支持

5.2.3 添加視頻源

5.2.4 track元素

5.2.6 卸掉沉重的負擔

5.3 音頻

5.3.1 音頻編解碼器

5.4 Canvas

5.4.1 基於像素的自由

5.4.2 添加/實現canvas

創建一個畫布（Canvas）

使用 JavaScript 來繪製圖像

Canvas 座標

Canvas - 文本

Canvas - 漸變

Canvas - 圖像

5.5 SVG

5.5.1 向量的威力

【HTML學習】第五章富媒體