给我一个标准的html+css+javascript视频播放器主页模板
时间: 2024-05-15 21:16:14 浏览: 124
以下是一个基本的HTML/CSS/Javascript视频播放器主页模板:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>视频播放器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="poster.jpg" data-setup="{}">
<source src="video.mp4" type='video/mp4'>
<source src="video.webm" type='video/webm'>
<p class="vjs-no-js">
要查看此视频,请启用JavaScript,并考虑升级到支持HTML5视频的Web浏览器
</p>
</video>
</div>
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
</body>
</html>
```
CSS代码:
```
.container {
margin: 0 auto;
max-width: 960px;
padding: 20px;
}
#my-video {
margin: 0 auto;
display: block;
}
```
Javascript代码:
```
var player = videojs('my-video');
```
这个模板使用了Video.js库来实现一个基本的HTML5视频播放器。你可以自定义样式,并添加其他功能,如自动播放、字幕、播放列表等。
阅读全文
相关推荐
![text/x-c](https://img-home.csdnimg.cn/images/20250102104920.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20250102104920.png)