文章目录
- 1.设计来源
-
- [1.1 好看的视频播放器风格一界面](#1.1 好看的视频播放器风格一界面)
- [1.2 好看的视频播放器风格二界面](#1.2 好看的视频播放器风格二界面)
- [1.3 好看的视频播放器风格三界面](#1.3 好看的视频播放器风格三界面)
- 2.效果和源码
-
- [2.1 动态效果](#2.1 动态效果)
- [2.2 源代码](#2.2 源代码)
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/143876998
HTML5实现好看的视频播放器(三种风格，附源码)，好看的视频播放器源码，多种视频播放器源码，HTML视频播放器源码，精美视频播放器，多种播放器效果，播放器的色调，文字，进度等均可配置，可以扩展自己想要的，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
1.1 好看的视频播放器风格一界面
好看的视频播放器风格一界面，支持视频标题，色调配置，简约型视频，适合内容里面插入的视频。更多效果见下面的视频演示。代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.2 好看的视频播放器风格二界面
好看的视频播放器风格二界面，支持视频标题，色调配置，相关视频按钮操作，鼠标悬浮出现，鼠标移除消失，音量，快进快退，适合内容里面插入的视频。更多效果见下面的视频演示。代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
鼠标悬浮效果
鼠标移出效果
1.3 好看的视频播放器风格三界面
好看的视频播放器风格三界面，支持视频标题，色调配置，相关视频按钮操作，鼠标悬浮出现，鼠标移除消失，音量，快进快退，多个视频切换，适合内容里面插入的视频。更多效果见下面的视频演示。代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的好看的视频播放器。
HTML5实现好看的视频播放器(三种风格，附源码)
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。或者直接在这里 下载源码，如有其他技术问题，请私信博主，博主看到后第一时间回复。
<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/article/details/128349160-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好看的视频播放器风格2 - xcLeigh</title>
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<div class="htmleaf-container">
<div style="color: white; text-align: center; font-family: 华文中宋; padding: 20px; font-size: 22px;">好看的视频播放器风格二</div>
<div class="videos">
<!--bottom-->
<div class="video_b" style="margin-top:0">
<div class="video_b_in">
<div class="video_ls">
<video id="vids" poster="media/01.jpg">
您的浏览器不支持h5标签,请升级或换个浏览器
</video>
<!--标题-->
<div class="title_top">
生命中的那一抹光
</div>
<!--列表菜单-->
<div class="list_right">
<a href="javascript:void(0)" id="like"><i class="iconfont icon-xinxing2"></i></a>
<a href="javascript:void(0)" id="zan"><i class="iconfont icon-dianzan"></i></a>
<a href="javascript:void(0)"><i class="iconfont icon-pinglun"></i></a>
<a href="javascript:void(0)"><i class="iconfont icon-zhuanfa"></i></a>
<a href="javascript:void(0)"><i class="iconfont icon-gerenyetianjiajiaguanzhu"></i></a>
</div>
<!--暂停-->
<div id="pass">
<img src="media/zt.png">
</div>
<!--控制器-->
<div class="controls">
<!--进度条容器-->
<div id="pBar">
<!--进度条底色-->
<div class="pBar_bj">
<!--缓冲的进度条-->
<div id="buff"></div>
<!--进度条动态-->
<div id="pBar_move">
<!--进度条按钮-->
<div id="pBtn"></div>
</div>
</div>
</div>
<!--展厅播放快进快退音量全屏-->
<div class="trol_list">
<!--暂停和快进快退-->
<div class="list_1">
<i class="iconfont icon-kuaitui-copy" onClick="ktui()"></i>
<i class="iconfont icon-zanting2" id="ztbf"></i>
<i class="iconfont icon-kuaijin" onClick="kjin()"></i>
</div>
<!--音量-->
<div class="voice">
<i class="iconfont icon-yinliang" style="float:left;"></i>
<div class="voicep">
<div id="vBar">
<div id="vBar_in"></div>
</div>
<div id="vBtn"></div>
</div>
</div>
<!--时间-->
<div class="vtime">
<font id="nTime">00:00:00</font>/<em id="aTime">00:00:00</em>
</div>
<!--全屏-->
<i id="qp" class="iconfont icon-quanping"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/vedio.js"></script>
</body>
</html>源码下载
注：源码下载在文章头部也可以点击下载，跟这里的是一样的
HTML5实现好看的视频播放器（三种风格，源码） 点击下载
--------------- 业精于勤，荒于嬉 ---------------
--------------- 行成于思，毁于随 ---------------
💢 关注博主 带你实现畅游前后端
🏰 大屏可视化 带你体验酷炫大屏
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署 （有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注 ：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏 ，如 🈶 问题请 留言（私信或评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/143876998（防止抄袭，原文地址不可删除）