简单的运用html css js制作一个视频播放页面
时间: 2023-08-05 20:04:24 浏览: 143
好的,以下是一个简单的HTML CSS JS视频播放页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>视频播放页面</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<video controls>
<source src="video.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video. Here is a <a href="video.mp4">link to the video</a> instead.</p>
</video>
</div>
</body>
</html>
```
在这个示例中,我们使用了HTML5的`<video>`元素来显示视频,并且使用CSS样式来设置视频的宽度和高度以及包含视频的容器的样式。我们还添加了一个“控件”属性,这样用户就可以通过播放、暂停、音量、全屏等按钮来控制视频播放。
在`<video>`元素中,我们指定了视频的源文件(`src`属性)和文件类型(`type`属性)。如果用户的浏览器不支持HTML5视频,我们还提供了一个备用的链接。
我们还可以通过JavaScript来控制视频的播放,暂停等操作。例如:
```javascript
var video = document.getElementsByTagName('video')[0];
video.play(); // 播放视频
video.pause(); // 暂停视频
video.currentTime = 30; // 将视频跳转到第30秒
```
希望这个示例能对您有所帮助!
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)