一尺美家是一个装修公司,提供专业的装修服务。这个网站的HTML和CSS代码展示了如何设置一个基本的视频播放器样式。
HTML和CSS代码解析:
.video-js
类用于设置视频播放器的宽度和高度。.vjs-fluid
类用于设置播放器的高度,使其填充整个容器。@font-face
规则用于定义一个新的字体家族,这里使用了云雀图标库(yunque iconfont)。
以下是HTML和CSS代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一尺美家</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="video-js vjs-default-skin">
<video id="my-video" class="video-js" controls preload='auto' width='640' height='264' data-setup='{"techOrder": ["html5"]}'>
<source src='movie.mp4' type='video/mp4'>
<source src='movie.ogg' type='video/ogg'>
</video>
</div>
<script src="https://cdn.jsdelivr.net/npm/videojs@5.13.2"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/videojs/5.13.2/videojs-browser.min.js"></script>
</body>
</html>
/* styles.css */
body {
font-family: "微软雅黑", sans-serif;
}
.video-js {
width: 300px;
height: 150px;
}
.vjs-fluid {
padding-top: 56.25%; /* 这个属性让视频播放器填充其父元素的高度 */
}