單元課程04HTML5 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(): 暫停