H5实现一个简易本地视频播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../fonts/font_x1hton6tlu9/">
<style>
html,body {
background-color: #ccc;
}
*{
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 700px;
height: 500px;
background-color: #ccc;
margin: 0 auto;
margin-top: 100px;
display: flex;
}
.left {
flex: 3;
background-color: rgb(80, 71, 71 );
}
.left_top{
font-size: 25px;
height: 100px;
text-align: center;
line-height:100px;
border-bottom: 1px solid rgba(0, 0, 0, 0.096) ;
}
.left_list{
height: 80%;
/* padding-top: 30px; */
background-color: hsla(0, 5%, 41%, 0.959);
}
.left_list ul{
list-style: none;
}
.left_list ul li{
height: 30px;
border-bottom: 1px solid rgba(219, 202, 202, 0.63);
text-align: center;
line-height: 30px;
}
.left_list ul li:nth-child(1){
border-top:1px solid rgba(219, 202, 202, 0.63);
}
.right {
flex:7;
background-color:rgba(82, 83, 83, 0.952);
}
.right_top{
height: 400px;
background-color: rgba(19, 20, 20, 0.89);
}
.right_bottom {
height: 100px;
}
.iconfont{
font-size: 40px;
}
/* 开关按钮 */
.iconfont.open_down {
}
/* 全屏按钮 */
. {
}
/* 进度条 */
.iconfont.progress_bar {
}
video{
width: 100%;
height: 100%;
}
/* 浮动，让控制元素排成一排 */
.right_controls {
width: 100%;
position: relative;
height: 100%;
line-height: 100px;
margin-right: 20px;
}
.controls {
margin-right: 10px;
}
/* 进度条 */
[type="range"]{
/* vertical-align: middle; */
width: 280px;
}
.voice_controls {
position: absolute;
width: 100px;
transform-origin: left bottom;
transform:rotateZ(-90deg);
left: 430px;
top: 10px;
display: none;
}
/* 控制声音控件地显示与隐藏 */
.show {
display: inline;
}
/* 头部的标题 */
.top_name {
position:absolute;
font-size: 30px;
color: rgba(255, 248, 220, 0.452);
top: 0;
left: 50%;
}
</style>
</head>
<body>
<div class="container">
<!-- 左边播放列表部分 -->
<div class="left">
<!-- 标题 -->
<div class="left_top">播放列表</div>
<!-- 列表 -->
<div class="left_list">
<ul>
<li url="../video/movie01.mp4">01集</li>
<li url="../video/movie02.mp4">02集</li>
<li url="../video/movie03.mp4">03集</li>
<li url="../video/movie04.mp4">04集</li>
</ul>
</div>
</div>
<!-- 右边部分 -->
<div class="right">
<!-- 视频播放部分 -->
<div class="right_top">
<video src="../video/movie01.mp4" ></video>
</div>
<!-- 视频控制部分 -->
<div class="right_controls">
<!-- 开关按钮 -->
<i class="controls open_down iconfont icon-bofang
"></i>
<!-- 全屏控制按钮 -->
<i class="controls fullscreen iconfont icon-quanping
"></i>
<!-- 视频进度条 -->
<input class="controls bar" type="range" value="0">
<i class="controls voice iconfont icon-shengyin
"></i>
<input type="range" class="voice_controls">
</div>
</div>
<div class="top_name">正在播放</div>
</div>
<script>
// 获取元素
var open_down=(".open_down");
var video=("video");
var bar=(".bar");
var fullscreen=(".fullscreen");
var lis=("li");
var voice_controls=(".voice_controls");
var voice=(".icon-shengyin");
// 播放暂停
open_down.addEventListener("click",function(){
// 判断是否是开启按钮，是就播放
if(open_down.("icon-bofang")){
// 播放
();
open_down.("icon-bofang");
open_down.("icon-iconfront-")
}else{
// 暂停
();
open_down.("icon-iconfront-");
open_down.("icon-bofang")
}
})
// 以上，播放及暂停功能完成
// 视频进度改变，进度条记录变化
("timeupdate",function(){
// 已播放
var current=;
// 视频全程时间
var all=;
// 设置给进度条
=(current/all)*100;
// 视频播放完毕，自动
if(==100){
open_down.("icon-iconfront-");
open_down.("icon-bofang")
}
})
// 以上，记录进度功能完成
// 拉进度，改变视频进度
("change",function(){
=/100*;
if(==100){
open_down.("icon-iconfront-");
open_down.("icon-bofang")
}
})
// 以上，拉进度功能完成
// 全屏功能
('click',function(){
();
})
// 以上，全屏功能完成
// 切换视频
for(var i=0;i<;i++){
lis[i].addEventListener("click",fn)
}
// 因为是纯前端实现视频切换，我把视频地址通过自定义属性存在li标签上
function fn(){
=("url");
}
// 控制声音，和上面视频进度条的实现原理类似
("click",function(){
if(!voice_controls.("show")){
// 判断是声音控件是显示地状态还是隐藏地状态，显示的时候就隐藏
voice_controls.("show");
voice_controls.addEventListener("change",function(){
=voice_controls.value/100;
})}else{
voice_controls.("show");
}
})
</script>
</body>
</html>