用bootstrap写一个网页播放视频
时间: 2023-09-25 20:08:33 浏览: 60
可以使用Bootstrap的媒体对象(Media Object)来实现在网页中播放视频的功能。下面是一个简单的示例代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Video Player</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" controls>
<source src="your-video-file.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
在上述代码中,首先引入Bootstrap的CSS和JavaScript文件。然后使用媒体对象的embed-responsive和embed-responsive-16by9类来创建一个响应式的视频容器。在容器内部使用video元素来嵌入视频,并设置controls属性以便用户可以控制视频的播放、暂停、音量等等。需要将source元素的src属性设置为视频文件的URL,并将type属性设置为视频文件的MIME类型。
最后,再次引入Bootstrap的JavaScript文件,以确保页面中的Bootstrap组件正常工作。