视频播放器

来源：互联网发布：mac qq远程桌面编辑：程序博客网时间：2024/06/13 11:09

今天编写一个视频播放器插件，依然采用html5+jquery，所需要的知识点和上一篇（音乐播放器）差不多。照例先奉上最终效果图：

1、创建文件夹：

2、编写video.html文件：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>视频播放器</title>    <link rel="stylesheet" type="text/css" href="css/video.css"></head><body><div class="video">    <div class="tag">无与伦比 为杰沉迷</div>    <div class="screen">    </div>    <div class="block">        <div class="slider">            <div class="loaded"></div>            <div class="space"></div>            <div class="dot"></div>        </div>        <div class="control">            <div class="left">                <div class="time">                    <span class="currentTime">00:00</span>                    <span class="divide">/</span>                    <span class="totalTime">00:00</span>                </div>                <div class="list"></div>            </div>            <div class="center">                <div class="reset"></div>                <div class="prev"></div>                <div class="current"></div>                <div class="next"></div>                <div class="volume">                    <div class="volumeIcon"></div>                    <div class="volumeSlider">                        <div class="volumeSpace"></div>                        <div class="volumeDot"></div>                    </div>                </div>            </div>            <div class="right">                <div class="enlarge"></div>            </div>        </div>    </div>    <ul class="playlist"></ul></div></body><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src="js/jquery.videoPlay.js"></script><script type="text/javascript" src="js/video.js"></script></html>

功能主要包括：
控制当前视频播放进度；
前后切换；
音量控制；
显示隐藏视频列表；
右下角的按钮只是让界面好看点额，有兴趣可以自行添加功能 :）
2、编写video.css文件

*{margin: 0;padding: 0;font-family: "微软雅黑";}body{background-color: #000;}ul{list-style: none;}.video{    width: 800px;    height: 540px;    margin: 20px auto;    border: 5px solid #f2f2f2;    position: relative;    background-color:#fff;     overflow: hidden;}.tag{    width: 100%;    height: 40px;    text-align: center;    line-height: 40px;    color: #fff;    position: absolute;    top: 0;    z-index: 2;    background-color: rgba(0,0,0,0.5);    opacity: 0;    -webkit-transition:opacity 1s linear;}.tag:hover{    opacity: 1;}.screen{    width: 100%;    height: 450px;    max-height: 450px;    background-color: #000; }video{    width: 800px;    height: 100%;    color: #fff;    margin: 0 auto;}.block{    background-color: #fff;}.slider{    width: 100%;    height: 4px;    margin-top: 10px;    cursor: pointer;    position: relative;    background-color: #ddd;}.loaded,.space{    height: 100%;    position: absolute;}.dot{    width: 8px;    height: 8px;    border-radius: 4px;    background-color: #000;    position: absolute;    top: -2px;    opacity: 0;    -webkit-transition:opacity 0.4s linear;}.slider:hover .dot{    opacity: 1;}.loaded{    background-color: #ccc;}.space{    background-color: #222;}.control{    width: 98%;    height: 70px;    margin: 6px 1% 0;}.left,.right{    width: 22%;    float: left;}.time{    width: 100%;    height: 18px;    font-size: 14px;}.list{    width: 24px;    height: 38px;    cursor: pointer;    background: url(../img/list.png) center no-repeat;    opacity: 0.6;}.center{    width: 56%;    height: 100%;    float: left;    position: relative;}.reset,.prev,.next{    width: 44px;    height: 44px;    position: absolute;    top: 13px;    opacity: 0.6;    -webkit-transition:opacity 0.5s linear;}.reset:hover,.prev:hover,.next:hover{    opacity: 1;}.current{    width: 56px;    height:56px;    position: absolute;    top: 7px;}.reset{    left: 10%;    background:url(../img/control.png) top right no-repeat;}.prev{    left: 26%;    background:url(../img/control.png) top left no-repeat;}.next{    right: 26%;    background:url(../img/control.png) top center no-repeat;}.current{    left: 50%;    margin-left: -28px;    background:url(../img/control.png) no-repeat;    background-position: bottom left;}.volume{    width: 90px;    height: 30px;    position: absolute;    top: 20px;    right: 0;}.volumeIcon{    width: 24px;    height: 30px;    float: left;    background: url(../img/volume.png) center no-repeat;}.volumeSlider{    width: 64px;    height: 2px;    cursor: pointer;    float: left;    margin: 14px 0 0 2px;    position: relative;    background-color: #ccc;}.volumeSpace{    position: absolute;    height: 100%;    background-color: #000}.volumeDot{    width: 8px;    height: 8px;    border-radius: 4px;    background-color: #000;    position: absolute;    top: -3px;}.enlarge{    width: 30px;    height: 30px;    cursor: pointer;    margin-top: 20px;    float: right;    background: url(../img/enlarge.png) center no-repeat;    opacity: 0.6;}.playlist{    width: 300px;    height: 400px;    padding-top: 50px;    position: absolute;    top: 0;    left: -300px;    background-color: rgba(0,0,0,0.5);}.playlist li{    height: 30px;    margin: 5px 0;    cursor: pointer;    line-height: 30px;    text-indent: 20px;    color: #efefef;}

代码中只考虑在chrome浏览器中执行（-webkit-transition），另考虑到浏览器的兼容性，这里简单介绍一下css3中transition属性的用法：
transition功能支持从一个属性值平滑过渡到另一个属性值，webkit引擎支持-webkit-transition私有属性，Mozilla gecko引擎支持-moz-transition私有属性，presto引擎支持-o-transition私有属性。
transition-property：定义应用动画的属性，初始值是all；
transition-duration：定义动画所用时间，初始值是0(0秒)；
transition-delay：定义动画延迟时间，属性初始值是0，设置时间可以为正数、负数和0，非零时必须设置单位为s(秒)或者ms(毫秒)，为负数时，过渡的动作会从该时间点开始显示，之前的动作被截断。为正数时，过渡的动作会延迟出发。
transition-timing-function：定义动画效果，属性初始值是ease。
3、编写jquery.videoPlay.js插件文件

;(function($){    $.fn.videoPlay = function(){        var autoplay = false,       //自动播放            isplaying =false,       //当前状态            timeout,                //定时器            currentTrack = 0,       //当前播放索引            volume = localStorage.volume || 0.8,        //音量设定            video,                  //视频对象            playlist = [                "周杰伦 - 枫.mkv",                "周杰伦 - 一路向北.mkv"            ];                      //视频列表        //加载视频列表        for (var i = 0; i < playlist.length; i++) {            $('.playlist').append('<li>'+playlist[i]+'</li>');        }        //定义播放函数        var play = function(){            video.play();            timeout = setInterval(updateProgress, 500);            isplaying = true;        }        //定义暂停函数        var pause = function(){            video.pause();            clearInterval(updateProgress);            isplaying = false;        }        //设置进度函数        var setProgress = function(value){            var currentHr = parseInt(value/3600),                currentMin = parseInt(parseInt(value%3600)/60),                currentSec = parseInt(parseInt(value%3600)%60),                hr = currentHr<10?'0'+ currentHr:currentHr,                min = currentMin<10?'0' + currentMin:currentMin,                sec = currentSec<10?'0' + currentSec:currentSec,                ratio = value/video.duration*100;            $('.currentTime').html(hr+':'+min+':'+sec);            $('.space').css('width',ratio + '%');            $('.dot').css('left',ratio-0.5 + '%');        }        //更新进度        var updateProgress = function(){            setProgress(video.currentTime);        }        //给进度条绑定滑动函数        $('.slider').slider({            step:0.5,            slide:function(event,ui){                setProgress(video.duration * ui.value/100);                clearInterval(timeout);            },            stop:function(event,ui){                video.currentTime = video.duration * ui.value/100;                timeout = setInterval(updateProgress,500);            }        })        //设定音量函数        var setVolume = function(value){            video.volume = localStorage.volume = value;            $('.volumeSpace').css('width',value * 100 + '%');            $('.volumeDot').css('left',value * 100 + '%');        }        $('.volumeSlider').slider({            step:0.01,            max:1,            min:0,            value:volume,            slide:function(event,ui){                setVolume(ui.value);            }        })        //切换播放索引        var switchTrack = function(i){            if (i==playlist.length) {                currentTrack = 0;            }else if (i<0) {                currentTrack = playlist.length-1;            }            loadVideo(currentTrack);            if (isplaying==true) {                play();            }        }        //设定加载前函数        var beforeLoad = function(){            var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;            $('.loaded').css('width', (100 / (this.duration || 1) * endVal) +'%');            var totalHr = parseInt(video.duration/3600),                totalMin = parseInt(parseInt(video.duration%3600)/60),                totalSec = parseInt(parseInt(video.duration%3600)%60);            totalhr = totalHr<10?'0'+ totalHr:totalHr;            totalmin = totalMin<10?'0' + totalMin:totalMin;            totalsec = totalSec<10?'0' + totalSec:totalSec;            $('.totalTime').html(totalhr+':'+totalmin+':'+totalsec);        }        //设定加载完成函数        var afterLoad = function(){            if (autoplay == true) {                play();            }        }        //设定播放结束函数        var ended = function(){            video.currentTime = 0;            switchTrack(++currentTrack);        }        //设定加载视频函数        var loadVideo = function(i){            $('.screen').empty();            var newvideo = $('<video>').html('<source src="media/'+playlist[i]+'">'+'您的浏览器不支持播放该视频').appendTo('.screen');            video = newvideo[0];            $('.tag').html(playlist[i]);            $('.playlist li:eq('+i+')').css("color","#fff").siblings().css("color","#efefef");;            video.addEventListener('progress',beforeLoad,false);            video.addEventListener('durationchange',beforeLoad,false);            video.addEventListener('canplay',afterLoad,false);            video.addEventListener('ended',ended,false);        }        loadVideo(currentTrack);        setVolume(volume);        $('.current').on('click',function(){            if (isplaying==false) {                $(this).css('background-position','bottom right');                isplaying = true;                play();            }else{                $(this).css('background-position','bottom left');                isplaying = false;                pause();            }        })        $('.reset').on('click',function(){            pause();            $('.current').css('background-position','bottom left');            isplaying = false;            video.currentTime = 0;        })        $('.prev').on('click',function(){            $('.current').css('background-position','bottom right');            isplaying = true;            switchTrack(--currentTrack);        })        $('.next').on('click',function(){            $('.current').css('background-position','bottom right');            isplaying = true;            switchTrack(++currentTrack);        });        $('.list').toggle(function(){            $(this).css('opacity',1);            $('.playlist').animate({                left:0            },500);        },function(){            $(this).css('opacity',0.6);            $('.playlist').animate({                left:"-300px"            },500);        });        $('.playlist li').each(function(index){            $(this).click(function(){                $(this).css("color","#fff").siblings().css("color","#efefef");                currentTrack = index;                switchTrack(currentTrack);            })        });    }})(jQuery)

4、编写video.j引用代码（可以省略，可将插件文件改善一下直接引用即可）

$(document).ready(function(){    $(document).videoPlay();});

至此即完成一个简单的视频播放器。

完整插件下载地址：视频播放器。

0 0