HTML5实现好看的视频播放器(三种风格，附源码)

xcLeigh

于 2024-11-19 11:34:04 发布

阅读量10w+

点赞数 114

分类专栏：资源源码 HTML5实战案例文章标签： html5 音视频前端

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/143876998

版权

HTML5实战案例同时被 2 个专栏收录

164 篇文章

订阅专栏

资源源码

148 篇文章

订阅专栏

在这里插入图片描述

文章目录

1.设计来源
2.效果和源码
- 2.1 动态效果
- 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（防止抄袭，原文地址不可删除）