html5+css3实现稍微完整的视频播放器
程序员文章站
2022-07-13 15:38:59
...
html5+css3实现稍微完整的视频播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/project04.css">
<script src="js/jquery.min.js"></script>
<script src="js/html5shiv.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="box-left">
<div class="user-info">
<label class="user-img"><img src="img/Headportrait.png"></label>
<label class="user-name">夜影ttc</label>
</div>
<!--电影分类-->
<div class="class-items">
<nav>
<label><a href="javascript:;" class="active">文艺</a></label>
<label><a href="javascript:;">音乐</a></label>
<label><a href="javascript:;">恐怖</a></label>
<label><a href="javascript:;">科幻</a></label>
<label><a href="javascript:;">悬疑</a></label>
<label><a href="javascript:;">传记</a></label>
</nav>
</div>
<!--我的收藏-->
<div class="my-collection">
<h3>我的收藏</h3>
<ul>
</ul>
</div>
</div>
<div class="box-right">
<!--搜索栏-->
<div class="search">
<label>
<input type="text" name="sear" class="sear" />
<input type="button" name="btn" class="sear-btn" value="搜索" />
</label>
</div>
<!--电影页-->
<div class="movie-items">
<h3>文艺</h3>
<div class="movies">
<div class="items">
<div class="m-item">
<label><img src="img/1.jpg" /></label>
<div class="control" data-name="水形物语" data-src="1.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
<div class="m-item">
<label><img src="img/2.jpg" /></label>
<div class="control" data-name="Amelie" data-src="2.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
<div class="m-item">
<label><img src="img/3.jpg" /></label>
<div class="control" data-name="Loving vincent" data-src="3.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
<div class="m-item">
<label><img src="img/4.jpg" /></label>
<div class="control" data-name="The Last Emperor" data-src="4.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
<div class="m-item">
<label><img src="img/5.jpg" /></label>
<div class="control" data-name="Malena" data-src="1.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
<div class="m-item">
<label><img src="img/6.jpg" /></label>
<div class="control" data-name="驴得水" data-src="2.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
<div class="m-item">
<label><img src="img/7.jpg" /></label>
<div class="control" data-name="Mandy Lane" data-src="3.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
<div class="m-item">
<label><img src="img/8.jpg" /></label>
<div class="control" data-name="3211" data-src="4.mp4">
<label><img src="img/begin.png" class="play-btn" /></label>
<label><img src="img/collection.png" class="collection-btn" /></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--视频播放-->
<div class="media-box">
<div class="video-box">
<video class="video" src="source/1.mp4" width="600" height="450" controls></video>
<div class="video-control">
<nav>
<a href="javascript:void(0);" onclick="moviePlay()">播放</a>
<a href="javascript:void(0);" onclick="moviePause()">暂停</a>
<a href="javascript:void(0);" onclick="twoSpeed()">2倍速</a>
<a href="javascript:void(0);" onclick="oneSpeed()">1倍速</a>
<a href="javascript:void(0);" onclick="halfSpeed()">半倍速</a>
<a href="javascript:void(0);" onclick="fullScreen()">全屏</a>
<a href="javascript:void(0);" onclick="movieClose()">关闭</a>
</nav>
</div>
</div>
</div>
</div>
<script src="js/project04.js"></script>
</body>
</html>/**
* CSS文件
* Time: 2018/9/8
* Author: SanPhantom
* Feature:
*/
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html, body {
width: 100%;
height: 100%;
background-image: url("../img/bac10.jpg");
position: fixed;
overflow: auto;
}
.box {
width: 60%;
min-width: 1010px;
height: 700px;
background-color: rgba(0, 0, 0, .5);
margin: 100px auto;
}
/*页面左边*/
.box-left {
float: left;
height: 100%;
width: 20%;
min-width: 200px;
border-right: 1px solid #ccc;
}
/*用户头像*/
.box-left .user-info {
width: 100%;
padding: 30px 0;
display: flex;
flex-flow: column;
border-bottom: 1px solid #ccc;
}
.user-info label {
width: 100%;
vertical-align: center;
text-align: center;
color: #fff;
font-size: 20px;
}
.user-info label img {
width: 80px;
height: 80px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/*影片分类*/
.box-left .class-items {
padding: 0 50px;
border-bottom: 1px solid #ccc;
}
.class-items nav {
display: flex;
flex-flow: column;
text-align: center;
}
.class-items nav a{
display: block;
padding: 5px 10px;
border: 1px solid #ccc;
margin: 5px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #fff;
}
.active {
background-color: #ccc;
color: #000 !important;
}
/*我的收藏*/
.box-left .my-collection {
text-align: center;
height: 260px;
overflow-y: auto;
}
.my-collection h3 {
padding: 10px 0;
color: #fff;
}
.my-collection ul>li {
margin: 5px 0;
}
.my-collection ul>li>a {
color: #ccc;
font-size: 12px;
}
/*页面右边*/
.box-right {
float: right;
height: 100%;
width: 79%;
max-width: 79%;
min-width: 800px;
}
/*搜索栏*/
.box-right .search {
width: 80%;
margin: 15px auto;
}
.box-right .search label {
display: block;
width: 100%;
height: 50px;
}
.box-right .search>label .sear{
float: left;
width: 80%;
height: 45px;
background-color: rgba(255,255,255,0);
border: 1px solid #ccc;
}
.box-right .search>label .sear-btn{
float: left;
width: 19%;
height: 47px;
background-color: rgba(255,255,255,0);
border: 1px solid #ccc;
color: #fff;
font-size: 20px;
}
/*电影列表*/
.box-right .movie-items {
width: 80%;
margin: 15px auto;
}
.movie-items h3 {
color: #fff;
text-align: center;
padding: 10px 0;
}
.movie-items .movies {
padding: 15px;
border: 1px solid #ccc;
border-radius: 15px;
}
.movie .items {
width: 70%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.items .m-item{
display: inline-block;
width: 20%;
padding: 10px 0;
margin: 0 1% 0 2%;
}
.m-item .control {
display: flex;
height: 20px;
width: 100%;
}
.m-item .control label {
display: block;
text-align: center;
flex: 1;
}
.m-item .control label>img {
width: 20px;
height: 20px;
}
.m-item label img {
width: 100%;
}
/*视频播放*/
.media-box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0, 0, 0, .8);
display: none;
}
.media-box .video-box {
position: absolute;
left: 50%;
top: 50%;
width: 800px;
height: 450px;
margin-left: -300px;
margin-top: -225px;
}
.video-box .video {
float: left;
}
.video-box .video-control {
float: right;
width: 100px;
height: 450px;
}
.video-control nav a {
display: block;
width: 100px;
height: 55px;
text-align: center;
line-height: 55px;
border: 1px solid #ccc;
color: #ccc;
margin: 10px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}/**
* JavaScript文件
* Time: 2018/9/8 15:35
* Author: SanPhantom
* Feature:
*/
$(function () {
let $movies = $(".m-item");
let $videoBox = $(".media-box");
let movieJson = [
{
title: "文艺",
movies: [
{src: "1.mp4", imgSrc: "1.jpg", name: "水形物语"},
{src: "2.mp4", imgSrc: "2.jpg", name: "Amelie"},
{src: "3.mp4", imgSrc: "3.jpg", name: "Loving vincent"},
{src: "4.mp4", imgSrc: "4.jpg", name: "The Last Emperor"},
{src: "1.mp4", imgSrc: "5.jpg", name: "Malena"},
{src: "2.mp4", imgSrc: "6.jpg", name: "驴得水"},
{src: "3.mp4", imgSrc: "7.jpg", name: "Mandy Lane"},
{src: "4.mp4", imgSrc: "8.jpg", name: "3211"}
]
},
{
title: "音乐",
movies: [
{src: "1.mp4", imgSrc: "9.jpg", name: "音乐1"},
{src: "2.mp4", imgSrc: "10.jpg", name: "音乐2"},
{src: "3.mp4", imgSrc: "11.jpg", name: "音乐3"},
{src: "4.mp4", imgSrc: "12.jpg", name: "音乐4"},
{src: "1.mp4", imgSrc: "13.jpg", name: "音乐5"},
{src: "2.mp4", imgSrc: "14.jpg", name: "音乐6"},
{src: "3.mp4", imgSrc: "15.jpg", name: "音乐7"},
{src: "4.mp4", imgSrc: "16.jpg", name: "音乐8"}
]
},
{
title: "恐怖",
movies: [
{src: "1.mp4", imgSrc: "17.jpg", name: "水形物语"},
{src: "2.mp4", imgSrc: "18.jpg", name: "Amelie"},
{src: "3.mp4", imgSrc: "19.jpg", name: "Loving vincent"},
{src: "4.mp4", imgSrc: "20.jpg", name: "The Last Emperor"},
{src: "1.mp4", imgSrc: "21.jpg", name: "Malena"},
{src: "2.mp4", imgSrc: "22.jpg", name: "驴得水"},
{src: "3.mp4", imgSrc: "23.jpg", name: "Mandy Lane"},
{src: "4.mp4", imgSrc: "24.jpg", name: "3211"}
]
},
{
title: "科幻",
movies: [
{src: "1.mp4", imgSrc: "25.jpg", name: "水形物语"},
{src: "2.mp4", imgSrc: "26.jpg", name: "Amelie"},
{src: "3.mp4", imgSrc: "1.jpg", name: "Loving vincent"},
{src: "4.mp4", imgSrc: "5.jpg", name: "The Last Emperor"},
{src: "1.mp4", imgSrc: "9.jpg", name: "Malena"},
{src: "2.mp4", imgSrc: "8.jpg", name: "驴得水"},
{src: "3.mp4", imgSrc: "10.jpg", name: "Mandy Lane"},
{src: "4.mp4", imgSrc: "7.jpg", name: "3211"}
]
},
{
title: "悬疑",
movies: [
{src: "1.mp4", imgSrc: "24.jpg", name: "水形物语"},
{src: "2.mp4", imgSrc: "23.jpg", name: "Amelie"},
{src: "3.mp4", imgSrc: "20.jpg", name: "Loving vincent"},
{src: "4.mp4", imgSrc: "18.jpg", name: "The Last Emperor"},
{src: "1.mp4", imgSrc: "16.jpg", name: "Malena"},
{src: "2.mp4", imgSrc: "14.jpg", name: "驴得水"},
{src: "3.mp4", imgSrc: "12.jpg", name: "Mandy Lane"},
{src: "4.mp4", imgSrc: "10.jpg", name: "3211"}
]
},
{
title: "传记",
movies: [
{src: "1.mp4", imgSrc: "25.jpg", name: "水形物语"},
{src: "2.mp4", imgSrc: "18.jpg", name: "Amelie"},
{src: "3.mp4", imgSrc: "17.jpg", name: "Loving vincent"},
{src: "4.mp4", imgSrc: "15.jpg", name: "The Last Emperor"},
{src: "1.mp4", imgSrc: "13.jpg", name: "Malena"},
{src: "2.mp4", imgSrc: "11.jpg", name: "驴得水"},
{src: "3.mp4", imgSrc: "9.jpg", name: "Mandy Lane"},
{src: "4.mp4", imgSrc: "7.jpg", name: "3211"}
]
},
];
//视频分类排他
let $class = $(".class-items nav a");
let $movieClass = $(".movie-items");
let $movieItem = $(".items");
$class.each(function (index, ele) {
$(ele).on('click', function () {
$(this).parents().siblings().find("a").removeClass("active");
$(this).addClass("active");
$movieItem.children().remove();
for (let i = 0; i < movieJson.length; i++) {
if ($(this).html() === movieJson[i].title) {
$movieClass.find("h3").html($(this).html());
console.log(movieJson[i].movies);
for (let j = 0; j < movieJson[i].movies.length; j++) {
let $m = $("<div class=\"m-item\">\n" +
" <label><img src='img/"+movieJson[i].movies[j].imgSrc+"' /></label>\n" +
" <div class=\"control\" data-name='"+movieJson[i].movies[j].name+"' data-src='"+movieJson[i].movies[j].src+"'>\n" +
" <label><img src=\"img/begin.png\" class=\"play-btn\" /></label>\n" +
" <label><img src=\"img/collection.png\" class=\"collection-btn\" /></label>\n" +
" </div>\n" +
" </div>");
$movieItem.append($m);
}
}
}
controls();
})
});
//控制器
let $collection = $(".my-collection ul");
let controls = function () {
let $control = $(".control");
$control.each(function (index, ele) {
let that = this;
console.log(this);
$(ele).on("click", ".play-btn", function () {
console.log("I coming in");
$videoBox.css("display", "block");
$video.attr("src", "source/" + that.dataset.src);
});
$(ele).on("click", ".collection-btn", function () {
console.log("I coming in");
if ($(this).attr("src") === "img/collection.png") {
let li = $("<li><a href='javascript:;'>" + that.dataset.name + "</li>");
$collection.append(li);
$(this).attr("src", "img/collection2.png");
} else {
for (let i = 0; i < $collection.children().length; i++) {
if ($collection.children().eq(i).text() === that.dataset.name) {
$collection.children().eq(i).remove();
$(this).attr("src", "img/collection.png");
}
}
}
});
});
};
controls();
});
//播放控制
let $video = $("video");
let video = $video[0];
function moviePlay() {
video.play();
}
function moviePause() {
video.pause();
}
function twoSpeed() {
video.playbackRate = 2 * video.defaultPlaybackRate;
}
function oneSpeed() {
video.playbackRate = video.defaultPlaybackRate;
}
function halfSpeed() {
video.playbackRate = 0.5 * video.defaultPlaybackRate;
}
function fullScreen() {
video.webkitRequestFullScreen();
}
function movieClose() {
video.pause();
$(".media-box").css("display", "none");
}页面截图：
上一篇： InfluxDB Java 客户端测试数据插入效率
下一篇： python 回测设置