首页用html+css+js写一个视频网站

用html+css+js写一个视频网站

时间: 2023-12-29 07:35:23 浏览: 258

当然可以！以下是一个简单的示例，展示如何使用 HTML、CSS 和 JavaScript 来创建一个基本的视频网站。 HTML： ```html <!DOCTYPE html> <html> <head> <title>视频网站</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header> <h1>视频网站</h1> </header> <main> <div class="video-container"> <video id="video-player" controls> <source src="video.mp4" type="video/mp4"> </video> </div> </main> <footer> <p>© 2022 视频网站. All rights reserved.</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS（styles.css）： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } h1 { margin: 0; } main { padding: 20px; } .video-container { max-width: 800px; margin: 0 auto; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` JavaScript（script.js）： ```javascript const videoPlayer = document.getElementById('video-player'); // 播放视频 function playVideo() { videoPlayer.play(); } // 暂停视频 function pauseVideo() { videoPlayer.pause(); } // 停止视频 function stopVideo() { videoPlayer.pause(); videoPlayer.currentTime = 0; } // 音量调节 function setVolume(volume) { videoPlayer.volume = volume; } ``` 在上述示例中，我们使用了 `<video>` 标签来嵌入视频，并使用了 `controls` 属性来显示视频控制条。通过 JavaScript，我们可以控制视频的播放、暂停、停止和音量调节功能。请注意，这只是一个简单的示例，你可以根据自己的需求进行扩展和定制。还可以添加更多的页面和功能，比如视频列表、搜索等。希望对你有所帮助！如果有任何问题，请随时问我。

阅读全文