HTML5播放器实例

鉴于html5Audio and video的使用，设计了一个自定义风格的播放器，除实现一些基本的默认功能之外，还实现了一些高级功能。

具体功能如下：

 实现播放暂停按钮

 实现静音按钮

 实现音量调节滑动条

 实现播放进度控制条

 实现显示播放时间

 实现停止按钮

 实现缓冲进度控制条

 实现播放速率选择按钮

 实现全屏播放按钮

 实现关灯按钮

文件目录如下：

1、搭建程序显示框架——video.html

 <!DOCTYPE html>

 <html>

 <head>

     <title>Audio and video</title>

     <meta charset="utf-8">

     <link rel="stylesheet" type="text/css" href="css/video.css">

     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

 </head>

 <body>

 <header>

     <h1>html5 Audio and video</h1>

 </header>

 <section id="wrapper">

     <div class="videoContainer">

         <video id="myVideo" src="jiehun.mp4" controls >

             sorry ,不支持！

         </video>

         <div class="caption">html5 Audio and video</div>

         <div class="control">

             <div class="topControl">

                 <div class="progress">

                     <span class="bufferBar"></span>

                     <span class="timeBar"></span>

                 </div>

                 <div class="time">

                     <span class="current"></span>/

                     <span class="duration"></span>

                 </div>

             </div>

             <div class="btmControl">

                 <div class="btnPlay btn" title="Play/Pause video"></div>

                 <div class="btnStop btn" title="Stop video"></div>

                 <div class="spdText btn">speed:</div>

                 <div class="btnX1 btn text selected" title="Normal speed">X1</div>

                 <div class="btnX3 btn text " title="Fast forword X3">X3</div>

                 <div class="btnFS btn" title="Switch to full screen"></div>

                 <div class="btnLight btn lighton" title="Turn on/off light"></div>

                 <div class="volume" title="Set volume">

                     <span class="volumeBar"></span>

                 </div>

                 <div class="sound sound2 btn" title="Mute/unmute sound"></div>

             </div>

         </div>

         <div class="loading"></div>

     </div>

 </section>

 <footer>

     <span>Write by wang from csust</span>

 </footer>

 </body>

     <script type="text/javascript" src="js/video.js"></script>

 </html>

2、播放器样式设计——video.css

 .videoContainer{

     width: 600px;

     height: 350px;

     position: relative;

     overflow: hidden;

     background:#000;

     color:#ccc;

 }

 video{

     width: 600px;

     height: 350px;

 }

 .caption{

     display:none;

     position: absolute;

     top:;

     left:;

     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;

     background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

     background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

     background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

 }

 .control{

     background:#333;

     color: #ccc;

     position: absolute;

     bottom:;

     left:;

     width:100%;

     z-index:;

     display: none;

 }

 .topControl{

     height: 11px;

     border-bottom: 1px solid #404040;

     padding:1px 5px;

     background:#1F1F1F;

     background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

     background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

     background: -o-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

 }

 .btmControl{

     clear: both;

     background:#1F1F1F;

     background: -moz-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

     background: -webkit-linear-gradient(top,#242424 50%,#2F2F2F %50,#171717 100%);

     background: -o-linear-gradient(top,#242424 50%,#2F2F2F %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;

 }

 /*暂停缓冲背景*/

 .loading,#init{

     position: absolute;

     top:;

     left:;

     width: 100%;

     height: 100%;

     background: url(../images/loading1.png) no-repeat 50% 50%;

     z-index:;

     display: none;

 }

 #init{

     background: url(../images/play.png) no-repeat 50% 50% !important;

     cursor: pointer;

 }

 /*控制栏暂停播放按钮*/

 .control div.btnPlay{

     background:url(../images/play.png) no-repeat 5px 0;

      border-left: 1px solid #404040;

 }

 .control div.paused{

     background:url(../images/stop.png) no-repeat 5px 0;

 }

 /*播放时间和进度控制条样式*/

 .progress{

     width:85%;

     height: 10px;

     position: relative;

     float: left;

     cursor: pointer;

     background:#444;

     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:;

     left:;

     display: block;

     border-radius: 10px;

     -moz-border-radius: 10px;

     -webkit-border-radius: 10px;

 }

 .timeBar{

     z-index:;

     width:;

     background:#3FB7FC;

     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:;

     width:;

     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{

     width:15%;

     float:right;

     text-align: center;

     font-size: 11px;

     line-height: 12px;

 }

 .control div.sound{

     background:url(../images/volumeon.png) no-repeat 0px 0px;

     border:none;

     float: right;

 }

 .control div.sound2{

     background:url(../images/volumeon.png) no-repeat 0px 0px !important;

 }

 .control div.muted{

     background:url(../images/volumeoff.png) no-repeat 0px 0px !important;

 }

 .volume{

     position: relative;

     cursor:pointer;

     width:70px;

     height: 10px;

     float: right;

     margin-right: 10px;

     margin-top: 10px;

 }

 .volumeBar{

     display: block;

     height: 100%;

     position: absolute;

     top:;

     left:;

     background-color: #eee;

     z-index:;

     border-radius: 10px;

 }

 /*播放速率样式*/

 .control div.btnStop{

     background: url(../images/pause.png) no-repeat 0 0;

 }

 .control div.spdText{

     border:none;

     font-size: 14px;

     line-height:30px;

     font-style:italic;

 }

 .control div.selected{

     font-size: 15px;

     color: #ccc;

 }

 .control div.btnFS{

     background: url(../images/fullScreen.png) no-repeat 0 0;

     float: right;

 }

 .control div.btnLight{

     background: url(../images/lightoff.png) no-repeat 0 0;

     border-left: 1px solid #404040;

     float: right;

 }

 .control div.lighton{

     background: url(../images/lighton.png) no-repeat 0 0 !important;

     float: right;

 }

3、监听控制的JS代码——video.js

 $(document).ready(function(){

     var video = $('#myVideo');

     //关闭播放器默认的风格

     video[0].removeAttribute("controls");

     $('.control').show().css({'bottom':-45});

     $('.loading').fadeIn(500);

     $('.caption').fadeIn(500);

     //监听onloademetadate事件

     video.on('loadedmetadata',function(){

         $('.caption').animate({'top':-45},300)

         //初始化时间显示

         $('.current').text(timeFormat(0));

         $('.duration').text(timeFormat(video[0].duration));

         //在视频显示区添加播放按钮

         $('.videoContainer')

         .append('<div id="init"></div>')

         .hover(function(){

             $('.control').stop().animate({'bottom':0},500);

             $('.caption').stop().animate({'top':0},500);

         })

         //$('#init').fadeIn(200);

     });

     //监听oncanplay事件

     video.on('canplay',function(){

         $('.loading').fadeOut(100);

     });

     //监听oncanplaythrough事件

     var completeloaded = false;

     video.on('canplaythrough',function(){

         completeloaded = true;

     });

     //监听onended事件

     video.on('ended',function(){

         $('.btnPlay').removeClass("paused");

         video[0].paused();

     });

     //监听onwaiting事件

     video.on('waiting',function(){

         $('.loading').fadeIn(200);

     });

     //时间转换函数

     var timeFormat = function(seconds){

         var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);

         var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));

         return m+":"+s;

     }

     //添加播放和暂停按钮

     video.on('click',function(){

         playpause();

     })

     $('.btnPlay').on('click',function(){

         playpause();

     })

     var playpause = function() {

         if (video[0].paused || video[0].ended) {

             $('.btnPlay').addClass('paused');

             video[0].play();

         }

         else{

             video[0].pause();

             $('.btnPlay').removeClass('paused');

         }

     }

     //监听ontimeupdate事件，动态显示播放时间和进度控制条。

     video.on("timeupdate",function(){

         var currentPos = video[0].currentTime;

         var maxduration = video[0].duration;

         var perc = 100*currentPos/maxduration;

         $('.timeBar').css('width',perc+'%');

         $('.current').text(timeFormat(currentPos));

     });

     //显示缓冲进度

     var startBuffer = function(){

         var currentBuffer = video[0].buffered.end(0);

         var maxduration = video[0].duration;

         var perc = 100*currentBuffer/maxduration;

         $('.bufferBar').css('width',perc+'%');

         if (currentBuffer<maxduration) {

             setTimeout(startBuffer,500);

         }

     };

     //显示播放进度，并监听onmousedown和onmouseup事件

     var timeDrag = false;

     $('.progress').on('mousedown',function(e){

         timeDrag = true;

         updatebar(e.pageX);

     });

     $('.progress').on('mouseup',function(e){

         if (timeDrag) {

             updatebar(e.pageX);

         }

     });

     var updatebar = function(x){

         var progress = $('.progress');

         var maxduration = video[0].duration;

         var position = x - progress.offset().left;

         var percentage = 100*position/progress.width();

         if (percentage>100) {percentage = 100;};

         if (percentage<0) {percentage = 0;};

         $('.timeBar').css('width',percentage+'%');

         video[0].currentTime = maxduration*percentage/100;

     };

     //静音按钮

     $('.sound').click(function(){

         video[0].muted = !video[0].muted;

         $(this).toggleClass('muted');

         if (video[0].muted) {

             $('.volumeBar').css('width',0);

         }else{

             $('.volumeBar').css('width',video[0].volume*100+'%');

         }

     });

     //音量调节滑动条

     var volumeDrag = false;

     $('.volume').on('mousedown',function(e){

         volumeDrag = true;

         video[0].muted = false;

         $('.sound').removeClass('muted');

         updateVolume(e.pageX);

     });

     $('.volume').on('mouseup',function(e){

         if (volumeDrag) {updateVolume(e.pageX);};

     });

     var updateVolume = function(x,vol){

         var volume = $('.volume');

         var percentage;

         if (vol) {

             percentage = vol*100;

         }else{

             var position = x - volume.offset().left;

             percentage = 100*position/volume.width();

         }

         if (percentage>100) {percentage=100;};

         if (percentage<0) {percentage=0;};

         $('.volumeBar').css('width',percentage+'%');

         video[0].volume = percentage/100;

         if (video[0].volume==0) {

             $('.sound').removeClass('sound2').addClass('muted');

         }else if (video[0].volume>0.5){

             $('.sound').removeClass('muted').addClass('sound2');

         }

         else{

             $('.sound').removeClass('muted').removeClass('sound2');

         }

     };

     //播放速率选择按钮

     $('.btnX1').on('click',function(){

         fastfword(this,1);

     });

     $('.btnX3').on('click',function(){

         fastfword(this,3);

     });

     var fastfword = function(obj,spd){

         $('.text').removeClass('selected');

         $(obj).addClass('selected');

         video[0].playbackRate = spd;

         video[0].play();

     };

     //停止按钮

     $('.btnStop').on('click',function(){

         $('.btnPlay').removeClass('paused');

         updatebar($('.progress').offset().left);

         video[0].pause();

     });

     //全屏按钮

     $('.btnFS').on('click',function(){

         if ($.isFunction(video[0].webkitEnterFullscreen)) {

             video[0].webkitEnterFullscreen();

         }

         else if ($.isFunction(video[0].mozRequestFullScreen)) {

             video[0].mozRequestFullScreen();

         }else{

             alert('sorry,您的浏览器不支持全屏播放！');

         }

     })

     //关灯按钮

     $('.btnLight').click(function(){

         $(this).toggleClass("lighton");

         if (!$(this).hasClass('lighton')){

             $('body').append('<div class="overlay"></div>');

             $('.overlay').css(

             {

                 'position':'absolute',

                 'width':100+"%",

                 'height':$(document).height(),

                 'background':'#000',

                 'opacity':0.9,

                 'top':0,

                 'left':0,

                 'z-index':999

             })

             $('.videoContainer').css(

             {

                 'z-index':1000

             })

         }

         else{

             $('.overlay').remove();

         }

     })

 })

4、在Google chrome 浏览器中显示如图：

因图标按钮是在网上剪切后调节尺寸所得，所以比较丑，但基本的功能还是有的！

参考书籍：HTML5+CSS3技术应用

参考上一篇博客：http://www.cnblogs.com/zxjwlh/p/4547662.html

巴特西

HTML5播放器实例

最新文章

热门文章