查看: 1287|回复: 0

[网络技术] html5视频标签video控件自定义开发属于自己的视频播放器

[复制链接]

zhoji

等级:

级别: 管理员

UID: 1

积分: 407416

威望: 3806

贡献: 3745

活跃: 0

发贴: 1401 (4)

终极币: 394653

性别:

阅读权限: 200
在线时长: 1151 小时
注册时间: 2014-7-25
最后登录: 2025-4-29

电梯直达 go

楼主

发表于 2018-4-7 12:42:41 |只看该作者 |倒序浏览

查看完整版请注册登录浏览

您需要登录才可以下载或查看，没有帐号？点击注册

x

登录/注册后可看大图

QQ图片20180407134224.png (418.26 KB, 下载次数: 0)

下载附件

2018-4-7 12:42 上传

分析：
上图是用html5的video做的视频播放器，本来是自带默认控件的，但是默认的控件太丑了，我们想要开发属于自己的UI，可以利用css3+js来实现自己需要的效果，自己做一个比默认的更好看的html5视频播放器，体验会不同哦。上图包括播放器按钮，进度条，音量控制，全屏，全部都是自定义开发的，已经隐藏掉默认的样式了。

上代码：
下面代码是html基本架构，把整个自定义控件给架构好。

<body>
<div id="mov">
<video src="video/movie.mp4" id="video"></video>
<div id="shuiyin"></div>
<div id="ctrl">
<div id="play" class="play"></div>
<div id="progress">
<span id="bar">
</span>
<div id="control"></div>
</div>
<div id="sound" class="soundon"></div>
<div id="volume">
<span id="volume_bar">
</span>
<div id="volume_control"></div>
</div>
<div id="full"></div>
</div>
</body>

复制代码

接着就是css+css3了就是美化了一下。同时把进度条结合了js来做的。

<style>
*{margin:0px;}
#mov{width:534px; height:300px; margin:100px auto;}
#video{width:534px; height:300px; position:absolute;}
#ctrl{width:534px; height:30px; background:rgba(0,0,0,0.5); position:relative; top:270px;}
/*播放按钮样式*/
.play{width:0px; height:0px;
border-left:12px solid #FFF;
border-top:9px solid rgba(255,255,255,0);
border-bottom:9px solid rgba(255,255,255,0); float:left; margin:6px 5px; cursor:pointer;}
.play:hover{width:0px; height:0px;
border-left:12px solid #39F;
border-top:9px solid rgba(255,255,255,0);
border-bottom:9px solid rgba(255,255,255,0); float:left; margin:6px 5px; cursor:pointer;}
/*暂停按钮样式*/
.pause{width:4px; height:16px; margin:7px 5px;
border-left:4px solid #FFF;
border-right:4px solid #FFF; float:left; cursor:pointer;}
.pause:hover{width:4px; height:16px; margin:7px 5px;
border-left:4px solid #39F;
border-right:4px solid #39F; float:left; cursor:pointer;}
#progress{float:left; width:65%; height:5px;
background:#FFF; margin:12.5px 5px; position:relative; cursor:pointer;}
#bar{width:0%; height:100%; background:#39F;
display:inline-block; position:absolute; top:0; left:0; cursor:pointer;}
#control{width:9px; height:9px; position:absolute; left:-2px; top:-3px;
border-radius:100%; background:#FFF; box-shadow:0 0 8px #3399FF;
border:1px solid #39F; cursor:pointer;}
.soundon{width:16px; height:16px; background:url(images/soundon.png); position:relative; left:390px; top:8px; cursor:pointer;}
.soundoff{width:16px; height:16px; background:url(images/soundoff.png); position:relative; left:390px; top:8px; cursor:pointer;}
#volume{float:left; width:15%; height:5px;
background:#FFF; margin:-3px 30px;position:relative; cursor:pointer;}
#volume_bar{width:85%; height:100%; background:#39F;
display:inline-block; position:absolute; top:0; left:0; cursor:pointer;}
#volume_control{width:9px; height:9px; position:absolute; left:60px; top:-3px;
border-radius:100%; background:#FFF; box-shadow:0 0 8px #3399FF;
border:1px solid #39F; cursor:pointer;}
#full{width:20px; height:20px; background:url(images/full.png); float:left;
margin-left:120px; margin-top:-11px; cursor:pointer;}
#shuiyin{width:534px; height:300px; background:url(images/shuiyin.png); position:absolute; top:100px;}
</style>