目錄
一，視訊網站訓練任務
1，任務概述
2，任務過程
3，任務線索
4，參考代碼
4.1 工程結構
4.2 參考代碼
一，視訊網站訓練任務
1，任務概述
有個客戶有這樣的一個需求，想做一個視訊播放網站，所有視訊以圖檔列 表的形式顯示，當使用者點選圖檔的視訊，可以在頁面下方播放指定的電影。 那 麼現在開始學習 HTML，完成視訊網站的制作吧！
2，任務過程
使用<img>完成電影清單的顯示
使用 iframe 引入單個電影頁面
當點選圖檔的時候，在下方的 iframe 中切換圖檔對應的電影
3，任務線索
視訊： HTML 架構标簽、HTML 多媒體标簽
參考手冊：https://www.w3school.com.cn/html/index.asp
文檔： HTML 架構标簽.pdf、HTML 多媒體标簽.pdf
4，參考代碼
4.1 工程結構
4.2 參考代碼
Demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>自定義視訊網站</h1>
<p align="center">
<a href="video1.html" target="myFrame"><img src="./images/1.jpg" width="20%" title="視訊1"></a>
<a href="video2.html" target="myFrame"><img src="./images/2.jpg" width="20%" title="視訊2"></a>
<a href="video3.html" target="myFrame"><img src="./images/3.jpg" width="20%" title="視訊3"></a>
<a href="video4.html" target="myFrame"><img src="./images/4.jpg" width="20%" title="視訊4"></a>
</p>
<p align="center">
<a href="video5.html" target="myFrame"><img src="./images/11.jpg" width="20%" title="視訊5"></a>
<a href="video6.html" target="myFrame"><img src="./images/22.jpg" width="20%" title="視訊6"></a>
<a href="video7.html" target="myFrame"><img src="./images/33.jpg" width="20%" title="視訊7"></a>
<a href="video8.html" target="myFrame"><img src="./images/44.jpg" width="20%" title="視訊8"></a>
</p>
<p align="center">
<iframe name="myFrame" frameborder="0" width="70%" height="550px"></iframe>
</p>
</body>
</html> video1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video poster="./images/1.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html> video2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/2.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html> video3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/3.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html> video4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/4.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html> video5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/11.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html> video6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/22.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html> video7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/33.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html> video8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
<video controls="controls" poster="./images/44.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video>
</p>
</body>
</html>