單元課程04：HTML5 Video元件設計與應用
　

一、HTML5 Video 基本介紹與設計

1.HTML5 Video 線上課程參考: https://www.w3schools.com/html/html5_video.asp

　

2.HTML5 video 是影片標籤，可以在瀏覽器中很容易的插入影片，設定影片長、寬、增加影片播放控制列、是否自動播放、是否自動重覆播放等功能，。

3.HTML5 video 影片標籤語法
<video src="影片連結" controls></video>
主要在網頁上嵌入視訊, 用 src 屬性指定影片來源, 並可用 width/height 屬性設定影片的大小, 也可用 autoplay、control、loop 屬性做自動播放、加入控制面板等設定。在目前的 HTML5 標準中，影片的支援主要包括下列三種格式。

* WebM (.webm)

* Ogg Theora Vorbis (.ogg、.ogm、.ogv 等)

* MP4 H.264 (.mp4)

　

4.<video>標籤屬性說明

屬性	設定值	說明
autoplay	autoplay	是否自動畫播放
controls	controls	是否出現控制面板
height	pixels	Video的高度
loop	loop	是否循環播放
muted	muted	是否靜音
poster	URL	當影音在下載時的替代圖片
src	URL	影音來源位置
width	pixels	Video的寬度

二、HTML5 Video 設計案例參考

1. HTML5 Video 基本播放設計

參考資料：https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop

<!DOCTYPE html>
<html>
<body>

//設定 video 播放的相關屬性
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>

　

　

2. HTML5 Video 基本播放設計

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>

<script>
var myVideo = document.getElementById("video1");

function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function makeBig() {
myVideo.width = 560;
}

function makeSmall() {
myVideo.width = 320;
}

function makeNormal() {
myVideo.width = 420;
}
</script>

</body>
</html>
　

=========================================================

<HTML 部分>
1.建立 <video>的影片屬性與呈現方式
2.建立 <button>...</button> 按鍵與對應 function

<script> ...</script>
1. var myVideo //宣告物件變數
2. 設計 function()
3. 使用 video 方法
(1) video.play(): 播放
(2) video.pause(): 暫停

　

　