小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器

时间:2021-11-18 13:06:49

来自:http://blog.csdn.net/dawanganban/article/details/17679069

在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器先别急,在开始制作之前先了解一下视频文件的基本知识。

一、视频的格式

目前比较主流和使用比较的的视频格式主要有:avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中,根据浏览器的不同,目前拥有多套不同的编码器:

;

  • left:0;
  • width:100%;
  • padding:10px;
  • color:#ccc;
  • font-size:20px;
  • font-weight:bold;
  • box-sizing: border-box;
  • -ms-box-sizing: border-box;
  • -webkit-box-sizing: border-box;
  • -moz-box-sizing: border-box;
  • background: #1F1F1F; /* fallback */
  • background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • }
  • /*** VIDEO CONTROLS CSS ***/
  • /* control holder */
  • .control{
  • background:#333;
  • color:#ccc;
  • position:absolute;
  • bottom:0;
  • left:0;
  • width:100%;
  • z-index:5;
  • display:none;
  • }
  • /* control top part */
  • .topControl{
  • height:11px;
  • border-bottom:1px solid #404040;
  • padding:1px 5px;
  • background:#1F1F1F; /* fallback */
  • background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • }
  • /* control bottom part */
  • .btmControl{
  • clear:both;
  • background: #1F1F1F; /* fallback */
  • background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
  • }
  • .control div.btn {
  • float:left;
  • width:34px;
  • height:30px;
  • padding:0 5px;
  • border-right:1px solid #404040;
  • cursor:pointer;
  • }
  • .control div.text{
  • font-size:12px;
  • font-weight:bold;
  • line-height:30px;
  • text-align:center;
  • font-family:verdana;
  • width:20px;
  • border:none;
  • color:#777;
  • }
  • .control div.btnPlay{
  • background:url(control.png) no-repeat 0 0;
  • border-left:1px solid #404040;
  • }
  • .control div.paused{
  • background:url(control.png) no-repeat 0 -30px;
  • }
  • .control div.btnStop{
  • background:url(control.png) no-repeat 0 -60px;
  • }
  • .control div.spdText{
  • border:none;
  • font-size:14px;
  • line-height:30px;
  • font-style:italic;
  • }
  • .control div.selected{
  • font-size:15px;
  • color:#ccc;
  • }
  • .control div.sound{
  • background:url(control.png) no-repeat -88px -30px;
  • border:none;
  • float:right;
  • }
  • .control div.sound2{
  • background:url(control.png) no-repeat -88px -60px !important;
  • }
  • .control div.muted{
  • background:url(control.png) no-repeat -88px 0 !important;
  • }
  • .control div.btnFS{
  • background:url(control.png) no-repeat -44px 0;
  • float:right;
  • }
  • .control div.btnLight{
  • background:url(control.png) no-repeat -44px -60px;
  • border-left:1px solid #404040;
  • float:right;
  • }
  • .control div.lighton{
  • background:url(control.png) no-repeat -44px -30px !important;
  • }
  • /* PROGRESS BAR CSS */
  • /* Progress bar */
  • .progress {
  • width:85%;
  • height:10px;
  • position:relative;
  • float:left;
  • cursor:pointer;
  • background: #444; /* fallback */
  • background:-moz-linear-gradient(top,#666,#333);
  • background:-webkit-linear-gradient(top,#666,#333);
  • background:-o-linear-gradient(top,#666,#333);
  • box-shadow:0 2px 3px #333 inset;
  • -moz-box-shadow:0 2px 3px #333 inset;
  • -webkit-box-shadow:0 2px 3px #333 inset;
  • border-radius:10px;
  • -moz-border-radius:10px;
  • -webkit-border-radius:10px;
  • }
  • .progress span {
  • height:100%;
  • position:absolute;
  • top:0;
  • left:0;
  • display:block;
  • border-radius:10px;
  • -moz-border-radius:10px;
  • -webkit-border-radius:10px;
  • }
  • .timeBar{
  • z-index:10;
  • width:0;
  • background: #3FB7FC; /* fallback */
  • background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
  • background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
  • background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
  • box-shadow:0 0 1px #fff;
  • -moz-box-shadow:0 0 1px #fff;
  • -webkit-box-shadow:0 0 1px #fff;
  • }
  • .bufferBar{
  • z-index:5;
  • width:0;
  • background: #777;
  • background:-moz-linear-gradient(top,#999,#666);
  • background:-webkit-linear-gradient(top,#999,#666);
  • background:-o-linear-gradient(top,#999,#666);
  • box-shadow:2px 0 5px #333;
  • -moz-box-shadow:2px 0 5px #333;
  • -webkit-box-shadow:2px 0 5px #333;
  • }
  • /* time and duration */
  • .time{
  • width:15%;
  • float:right;
  • text-align:center;
  • font-size:11px;
  • line-height:12px;
  • }
  • /* VOLUME BAR CSS */
  • /* volume bar */
  • .volume{
  • position:relative;
  • cursor:pointer;
  • width:70px;
  • height:10px;
  • float:right;
  • margin-top:10px;
  • margin-right:10px;
  • }
  • .volumeBar{
  • display:block;
  • height:100%;
  • position:absolute;
  • top:0;
  • left:0;
  • background-color:#eee;
  • z-index:10;
  • }
  • /* OTHERS CSS */
  • /* video screen cover */
  • .loading, #init{
  • position:absolute;
  • top:0;
  • left:0;
  • width:100%;
  • height:100%;
  • background:url(loading.gif) no-repeat 50% 50%;
  • z-index:2;
  • display:none;
  • }
  • #init{
  • background:url(bigplay.png) no-repeat 50% 50% !important;
  • cursor:pointer;
  • }