First, video website training task
1. Task Overview
A customer has such a requirement that he wants to build a video playing website. All videos are displayed in the form of a list of pictures. When the user clicks the video of the picture, the specified movie can be played at the bottom of the page. Now start learning HTML and complete your video site!
2. Task process
use
The movie list is displayed
Use iframe to introduce a single movie page
When clicking on an image, switch the movie of the image in the iframe below
3. Task cues
Video: HTML frame tag, HTML multimedia tag
Reference manual: www.w3school.com.cn/html/index….
Document: HTML frame tag. PDF, HTML multimedia tag. PDF
4. Reference code
4.1 Engineering Structure
4.2 Reference Code
Demo.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, </h1> <p align="center"> <a href="video1.html" Target ="myFrame"><img SRC ="./images/1.jpg" width="20%" title=" video 1"></a> <a href="video2.html" target="myFrame"><img SRC = ". / images / 2. JPG "width =" 20% "title =" video 2 "> < / a > < a href =" video3. HTML "target =" myFrame "> < img SRC =".. / images / 3. JPG" Width = "20%" title = "video 3" > < / a > < a href = "video4. HTML" target = "myFrame" > < img SRC = ".. / images / 4. JPG "width =" 20%" Title = "video 4" > < / a > < / p > < p align = "center" > < a href = "video5. HTML" target = "myFrame" > < img SRC = ".. / images / 11. JPG "width =" 20%" Title = "video 5" > < / a > < a href = "video6. HTML" target = "myFrame" > < img SRC = ".. / images / 22. JPG "width =" 20% "title =" video 6 "> < / a > < a Href ="video7.html" target="myFrame"><img SRC ="./images/33.jpg" width="20%" title=" video7 "></a> <a href="video8.html" <img SRC ="./images/44.jpg" width="20%" title=" video 8"></a> </p> <p align="center"> frameborder="0" width="70%" height="550px"></iframe> </p> </body> </html>Copy the codevideo1.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <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>Copy the codevideo2.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <p align="center"> poster="./images/2.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video> </p> </body> </html>Copy the codevideo3.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <p align="center"> poster="./images/3.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video> </p> </body> </html>Copy the codevideo4.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <p align="center"> poster="./images/4.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video> </p> </body> </html>Copy the codevideo5.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <p align="center"> poster="./images/11.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video> </p> </body> </html>Copy the codevideo6.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <p align="center"> poster="./images/22.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video> </p> </body> </html>Copy the codevideo7.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <p align="center"> poster="./images/33.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video> </p> </body> </html>Copy the codevideo8.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <p align="center"> poster="./images/44.jpg" width="100%" src="./images/fun.mp4" autoplay="autoplay"></video> </p> </body> </html>Copy the codeThe chapters are summarized here (the better we understand you guys ~ 3 ~), the better we understand you guys.
Have a question welcome to ask, everyone together in learning Java on the road to play strange upgrade! (O ゜ – ゜▽゜)