一，视频网站训练任务

1，任务概述

有个客户有这样的一个需求，想做一个视频播放网站，所有视频以图片列表的形式显示，当用户点击图片的视频，可以在页面下方播放指定的电影。那么现在开始学习 HTML，完成视频网站的制作吧！

2，任务过程

使用完成电影列表的显示

使用 iframe 引入单个电影页面

当点击图片的时候，在下方的 iframe 中切换图片对应的电影

3，任务线索

视频： HTML 框架标签、HTML 多媒体标签

参考手册：www.w3school.com.cn/html/index.…

文档： 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>

章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

任务卡_04-前端技术_HTML与HTML5常用标签

一，视频网站训练任务

1，任务概述

2，任务过程

3，任务线索

4，参考代码

4.1 工程结构

4.2 参考代码