首页HTML5美化移动端静态网页视频网站代码

HTML5美化移动端静态网页视频网站代码

时间: 2023-09-25 21:12:27 浏览: 283

以下是一个简单的HTML5美化移动端静态网页视频网站的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Video Website</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } .container { max-width: 600px; margin: 0 auto; padding: 10px; } video { width: 100%; height: auto; display: block; margin: 0 auto; } .video-info { margin-top: 10px; } .video-info h2 { font-size: 24px; margin: 0; padding: 0; } .video-info p { font-size: 16px; margin: 0; padding: 0; color: #666; } </style> </head> <body> <header> <h1>Video Website</h1> </header> <div class="container"> <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video> <div class="video-info"> <h2>Video Title</h2> <p>Uploaded on January 1, 2020</p> </div> </div> </body> </html> ``` 这个示例包含了一个简单的页面布局和样式，以及一个HTML5视频元素来嵌入视频。视频有默认的控制，用户可以播放、暂停、调整音量、跳跃到不同的时间点等等。视频下面有一个简单的标题和发布日期。这个示例可以适应不同大小的移动设备屏幕，因为使用了响应式设计。

阅读全文