html5:新屬性-video、audio 影片、音訊檔案置入－工作筆記(CSS+HTML)

video 插入方式與插人圖片(img)一樣簡單，只要設定好路徑及尺寸即可

但在 html5 插入的影片不會自動播放，得在影片畫面上新增控制面版，才能顯示播放鍵或自動播放

video 標籤裡可以一併使用用的屬性如下:

src:指定影片檔的路徑
poster: 影片沒有出現在畫面時，指定取代顯示的圖片
preload: 影片在背景裡下載完後，按下播放鍵就可以播放
autoplay: 影片自動播放
loop: 指定反覆播放次數
controls: 在影片畫面上追加控制面板
width: 指定影片畫面的寬度
height: 指定影片畫面的高度

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video src="animation.mp4" width="200" height="350"></video>
</body>
</html>
 
 

輸出畫面

poster 屬性

此屬性是當影片無法播放時，代替影片顯示的圖片。所以最好使用與影片畫面一樣大小的的圖片
如: 只準備 MP4 影片時，在不支援 h.264解碼器的瀏覽器裡，放置影片的地方就會顯示為白，若使用 poster屬性的話，影片位置上就會以圖片來取代

使用方式: <video src="animation.mp4" width="200" height="350" poster="animation.jpg">

controlts 屬性

此屬性可以在影片上操控影片的使用者介面，也就是指是否顯示控制面版。控制面板的形態會隨著網頁瀏覽器有所不同

原始碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video src="animation.mp4" width="200" height="350" controls></video>
</body>
</html>

輸出畫面

考量所有解碼器的製作方式

目前瀏覽器分別支援 H.264 及 Theora 解碼器，故在使用 video 時需一併插入這二種格式的影片。

當在插入二個影片時， video 指定的影片大小及屬性隨著解碼器而有不同的影片檔案位置，則使用 source 來做連結

如：chide.ogv 檔案，把檔案類型( type ) 指定為 video/ogg，解碼器指定為 theora 、vorbis 即可。如果是 mp4 檔案，套用 mp4 解碼器有多個編碼格式，不知道正確的解碼器時，不標記解碼器，只指定檔案類型也行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video width="200" height="350" controls autoplay poster="videoout.jpg">
<source src="animation.mp4" type="video/mp4">
<source src="animation.ogv" type='video/ogg : codecss="theora.vorbis"'>
</video>
</body>
</html>

如此一來，就算沒有 flash player，也可以在支援 H.264 及 Theora 解碼器的瀏覽器上看到所有影片

audio 標籤及屬性群

Html5 前播放音樂需使用 Flash play 、 media player 或 QuickTime等軟體，因瀏覽器本身無法播放音樂，而Html5 可使用 audio 播放

<audio> 用法與 <video> 的使用方法幾乎一樣，但因目前各瀏覽器支援的格式有所不同，需在<audio> 內使用 <source> 標籤，再按檔案類型種類指定。

＊以Firefox 來說，因為source 有指定的檔案格式，不支援的檔案格式是完全無法處理的，故音樂無法播放。所以必須先輸入ogg檔案的路徑。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<audio controls autoplay>
<source src="Sleep Away.ogg">
<source src="Sleep Away.mp3">
</audio>
</body>
</html>