css+jq实现的简单视频播放器效果 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script src="https://shengpingzhang.oss-accelerate.aliyuncs.com/templets/pc/js/jquery.min.js"></script>
<div class="video-fl">
<video controls="controls" poster="index-video-1.jpg" preload="none" src="index-cp-video.mp4"></video>
<span class="video-play">
<img src="video-icon.png" alt="">
</span>
</div>

<style>
.video-fl {
float: left;
width: 57.3%;
position: relative;
}
.video-fl video {
width: 100%;
height: auto;
}
.video-play {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
cursor: pointer;
}
.video-play img {
position: absolute;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
cursor: pointer;
z-index: 99;
display: block;
}
</style>

<script>
function videoStop() {
var Video = $('.index-video video');
for (var i = 0; i < Video.length; i++) {
var element = Video[i];
element.pause();
}
}
$('.video-play').click(function () {
videoStop();
var videos = $(this).siblings('video');
$(this).hide();
videos[0].play();
})
</script>
</body>
</html>

 

播放器按钮下载：https://files.cnblogs.com/files/xinlvtian/video-icon.zip

posted @ 2020-10-22 16:15  绿林豪士  阅读(550)  评论(0)  编辑  收藏  举报