认识达内从这里开始

认真做教育专心促就业

重磅干货!唯美的HTML视频播放器!

发布：tedu
来源：达内web教程
时间：2017-11-14 17:16

HTML 视频(Videos) 在 HTML 中播放视频的方法有很多种。 HTML视频(Videos)播放实例 !

效果图如下:

首先你需要准备一个mp4格式的视频文件,一个html文件;

个人文件夹如下,css文件在没有用到,可以删除,因为本教程用的是内置css:

附上我自己用画图工具画的几张草图(我不大会ps,所以请见谅,哈哈哈哈)

好了,到现在为止你还差了一部mp4格式的视频和剩下的代码辣,恩,废话不多说了,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>超级视频播放器</title>
<script src="#/jquery-3.2.1.min.js"></script>
</head>
<style type="text/css">
body{
padding:0;
margin:0;
}
ul,li{
list-style: none;
}
.wrap{
width:100%;
}
/*原始状态*/
.video_view{
width:1020px;
height:620px;
margin:50px auto;
background:#fff;
box-shadow:1px 2px 12px #666;
}
/*放大状态*/
.video_view_max{
width:100%;
height:100%;
position: absolute;
background:#fff;
margin:0 auto;
box-shadow:1px 2px 12px #666;
}
.video_view .header_view{
width:100%;
height:40px;
overflow: hidden;
background: rgba(228,228,228,0.8);
box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.video_view_max .header_view{
width:100%;
height:40px;
overflow: hidden;
background: rgba(228,228,228,0.8);
box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.video_view .header_view .control{
width:180px;
height:100%;
float: right;
}
.video_view .header_view .control li{
float: left;
margin-right:20px;
margin-left:20px;
}
.video_view .header_view .control .l1{
display: block;
width:16px;
height:100%;
cursor:pointer;
background:url(img/1.png) no-repeat center center;
background-size: 16px 16px;
}
.video_view .header_view .control .l2{
display: block;
width:16px;
height:100%;
cursor:pointer;
background:url(img/2.png) no-repeat center center;
background-size: 16px 16px;
}
.video_view .header_view .control .l3{
display: block;
width:16px;
height:100%;
cursor:pointer;
background:url(img/3.png) no-repeat center center;
background-size: 16px 16px;
}

.video_view_max .header_view .control{
width:180px;
height:100%;
float: right;
}
.video_view_max .header_view .control li{
float: left;
margin-right:20px;
margin-left:20px;
}
.video_view_max .header_view .control .l1{
display: block;
width:16px;
height:100%;
cursor:pointer;
background:url(img/1.png) no-repeat center center;
background-size: 16px 16px;
}
.video_view_max .header_view .control .l2{
display: block;
width:16px;
height:100%;
cursor:pointer;
background:url(img/2.png) no-repeat center center;
background-size: 16px 16px;
}
.video_view_max .header_view .control .l3{
display: block;
width:16px;
height:100%;
cursor:pointer;
background:url(img/3.png) no-repeat center center;
background-size: 16px 16px;
}

.video_view .video_main{
width:100%;
height:auto;
padding:0 0;
background:#4caf50;
}
.video_view_max .video_main{
width:100%;
height:auto;
padding:0;
background:#4caf50;
}
.looper{
position: fixed;
height:50px;
width:50px;
display: none;
bottom:10px;
right:10px;
cursor: pointer;
}
.looper img{
width:100%;
height:100%;
}
</style>
<body>
<div class="wrap">
<div class="looper"><img src="img/4.png" alt="" /></div>
<div class="video_view" id="video">
<div class="header_view">
<span class="control"><li class="l1" title="最小化"></li><li class="l2" title="放大/缩小"></li><li class="l3" title="关闭"></li></span>
</div>
<video class="video_main" src="宋冬野 - 斑马，斑马.mp4" controls="controls">
</video>
</div>
</div>
<script>
$(function(){
function suoxiao(){
$(".looper").css("display",'block'),
$("#video").css("display","none");
}
function fangda(){
$(".looper").css("display",'none'),
$("#video").css("display","block");
}
$(".l1").click(function(){
suoxiao();
});

$(".l2").click(function(){
if($("#video").hasClass('video_view')){
$("#video").removeClass("video_view");
$("#video").addClass("video_view_max");
}else{
$("#video").removeClass("video_view_max");
$("#video").addClass("video_view");
}
});
$(".l3").click(function(){
$('#video').css("display","none");
});
$(".looper").click(function(){
fangda();
});
});
</script>
</body>
</html>