HTML5视频播放器自定义界面效果
代码语言:html
所属分类:多媒体
代码描述:HTML5视频播放器自定义界面效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Oswald:300); * { box-sizing: border-box; } html { width: 100%; height: 100%; overflow: hidden; background: #1f323e; background: radial-gradient(ellipse cover at 80% 0%, #426168 0%, rgba(49, 67, 74, 0.1) 100%), radial-gradient(ellipse cover at 20% 100%, #080d11 0%, #243a43 100%); } body { font-family: 'Oswald', sans-serif; } video { border-radius: 6px; } /* video container */ .videoContainer { width: 380px; height: 163px; position: relative; overflow: hidden; background: #000; color: #ccc; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.8); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); margin: 50px auto 0; } .videoContainer:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3); z-index: 6; border-radius: 6px; pointer-events: none; } /* video caption css */ .caption { display: none; position: absolute; top: 0; left: 0; width: 100%; padding: 5px 10px; color: #ddd; font-size: 14px; font-weight: 300; text-align: center; background: rgba(0, 0, 0, 0.4); text-transform: uppercase; border-radius: 6px 6px 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } /*** VIDEO CONTROLS CSS ***/ /* control holder */ .control { color: #ccc; position: absolute; bottom: 10px; left: 10px; width: 360px; z-index: 5; display: none; } /* control bottom part */ .btmControl { clear: both; } .control .btnPlay { float: left; width: 34px; height: 30px; padding: 5px; background: rgba(0, 0, 0, 0.5); cursor: pointer; border-radius: 6px 0 0 6px; border: 1px solid rgba(0, 0, 0, 0.7); box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5); } .control .icon-play { background: url(http://repo.bfw.wiki/bfwrepo/image/5efe9475a705a.png) no-repeat -11px 0; width: 6px; height: 9px; display: block; margin: 4px 0 0 8px; } .control .icon-pause { background: url(http:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0