目录

​​一，视频网站训练任务​​

​​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 工程结构

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

 

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

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感兴趣的同学欢迎加入QQ学习交流群：1126298731

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