jquery  视频插件video.min.js缩略图

视频,缩略图沾满需要修改下css 。按钮剧中要几个样式 vjs-big-play-centered

<!-- 修改 -->
<div class="video-play">
	<div class="video-box">
		<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264"
			  poster="image/services.png"
			  data-setup="{}">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
		</video>
	</div>
</div>

视频满屏播放需要修改下样式


.video-play{
	margin: 0 auto;
	max-width: 600px;
	position: relative;
}
.video-play .play-button{
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 50px;
	border-radius: 10px;
	background-color: rgba(0,0,0,.6);
}

.video-box{
	height: 400px;
}
video{
	object-fit: cover;
}
.vjs-poster{
	background-size: cover;
}
.video-js{
	width: 100%;
	height: 100%;
}

@media (max-width:750px) {
	.video-box{
		height: 240px;
	}
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注