简介
名称与原理
作品名称：萌狼播放器
原理：H5 Video 自定义化
已实现功能
（1）播放暂停按钮、重置播放按钮
（2）点击屏幕可控制暂停、播放
（3）实现可全屏，全屏后，若鼠标一定时间未移动，则隐藏控制栏；鼠标移动，则显示控制栏
（4）可以通过直接点击进度条跳转进度
未完成功能
（1）音量控制
（2）倍速控制
（3）弹幕
缺点
对部分视频格式/编码格式不支持，这是Video标签的锅，与我萌狼蓝天无关
项目目录
index.html
--| xrilang-video-css
----| controller.css
----| dynamic.css
----| player.css
--| xirlang-video-javascript
----| video.js
代码
index.html
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 字体图标库 --><linkrel="stylesheet"href="https://at.alicdn.com/t/font_3159328_il2viqh3j9p.css"><scriptsrc="./source/js/jquery.min.js"></script><linkhref="./source/css/normalize.css"><!-- 自定义css --><linkrel="stylesheet"href="./xrilang-video-css/player.css"><linkrel="stylesheet"href="./xrilang-video-css/controller.css"><linkrel="stylesheet"href="./xrilang-video-css/dynamic.css"></head><body><!-- 播放器 --><figure><divclass="player"><divclass="title"><spanclass="iconfont icon-shipin"></span><span>萌狼播放器</span><ahref="https://cnblogs.com/mllt"><small> version：0.1</small></a></div><!-- <video src="http://akc4.top/video/videoBg1.mp4"></video> --><divclass="svedio"><!-- 下面元素默认隐藏 --><spanid="tipStop"class="iconfont icon-icon_video noshow fly-center"style="font-size:2em"></span><videosrc="./source/video/旋转复制_x264.mp4"></video></div><!-- 控制栏 --><divclass="controller"><!-- 进度条 --><divclass="bar"><divclass="line"></div></div><!-- 功能区 --><divclass="power"><!-- 播放按钮 --><divclass="basep"><spanid="state"class="iconfont icon-bofang1"></span><spanid="restate"class="iconfont icon-zanting1"></span></div><!-- 时间 --><divclass="timer"><spanclass="current">00:00:00</span> —— <spanclass="total">00:00:00</span></div><!-- 功能按钮 --><divclass="morep"><spanid="expand"class="iconfont icon-24gf-fullScreenEnter"></span></div></div></div></div></figure></body><!-- 自定义javascript --><scriptsrc="./xrilang-video-javasript/video.js"></script></html>
player.css
/* 播放器的css样式 *//* 注意：请不要随便修改样式名，会影响javascript的执行 *//* 微信公众号/哔哩哔哩：萌狼蓝天 *//* 博客：https://cnblogs.com/mllt */.player { /* 边距问题 */margin: 0auto; padding: 0; box-sizing: border-box; /* 大小问题 */width: 100%; height: auto; /* 字体问题 *//* 颜色问题 */background-color: #FD70A1; /* 边框问题 *//* border: 1px solid snow; */border-radius: 5px; /* 其他美化 */box-shadow: 1px1px1px1pxrgb(19, 141, 255, 0.2); } .player.title { margin: 0.25em; color: snow; } .player.titlespan { padding-left: 0.5em; font-size: 0.8em; } .playera { text-decoration: none; color: snow; } .playervideo { /* 边距问题 */margin: 0auto; padding: 0; box-sizing: border-box; /* 大小问题 */width: 100%; height: auto; } /* 去掉全屏时显示的自带控制条 */video::media-controls { display: none!important; }
