jplayer 播放器二次开发

jPlayer是个用JavaScript写的完全免费和开源的媒体库(media library)。作为jQuery插件的一员,使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频。通过jPlayer的API,你可以构想出具有创意的影音解决方案,当然,你也可以为jPlayer贡献出自己的一份力。

jPlayer有一个播放列表 但是不太灵活 自己试着写了一个jPlaylist类 

        var jPlayerList = function(object,medias,options){

            var _this = this;
            var player = null;
            var container = null;
            _this.current = 0;
            _this.playing = false;
        
            var defaults = {
                ready:function(event) {
                }
            }
            var op  = $.extend(defaults,options);
            var info = {
                title:"",
                author:""
            };
           
            var init = function(object,medias,options){
                _this.jPlayer = object.jPlayer;
                _this.cssSelectorAncestor = object.cssSelectorAncestor;
                _this.medias = medias;
                player = $(object.jPlayer);
                container = $(object.cssSelectorAncestor);

                var pl = player.jPlayer(op);
                
                for(var i=0; i<medias.length; i++ ) {
                    var obj = medias[i];
                    var title = obj.title;
                    var author = obj.artist;
                    if (typeof title === "undefined") { title=""; }
                    if (typeof author === "undefined") { author=""; }
                    $("#playlist").append('<li><b class="playlist-title">'+title+'</b><b class="playlist-author">'+author+'</b><i class="icon-remove jp-removeMedia"></i></li>');
                }
                
                player.bind($.jPlayer.event.ended,function(){
                    _this.next();
                })
                
                container.find(".jp-play").click(function(e){
                    _this.select(_this.current);
                    _this.play(); 
                    _this.playing = true;
                })

                container.find(".jp-previous").click(function(e){
                    _this.previous();
                })        
        
                container.find(".jp-next").click(function(e){
                    _this.next();
                })

                container.find(".jp-pause").click(function(e){
                    _this.pause();
                })
                
                container.find(".jp-stop").click(function(e){
                    _this.stop();
                })  

                $("#playlist").find(".jp-removeMedia").click(function(e){
                    var index = $(this).parent().index();
                    cosole.log(index);
                    _this.after(index);
                    _this.removeMedia(index);                   
                })         
        
            }
            
            init(object,medias,options);
            
            _this.select = function(index) {
                if (typeof index === "undefined") { index = 0; }          
                var nosupport = false;
                
                for(arg in _this.medias[index] ) {
                    if(arg == "m4v") {
                        alert("不支持此格式");
                        nosupport = true;
                    }
                }
                if(!nosupport) {
                    player.jPlayer("setMedia",_this.medias[index]);  
                    _this.current = index;
                }                          
            }
            
            _this.previous = function() {
                _this.current--;
                if(_this.current < 0) {
                    _this.current = _this.medias.length-1;
                }
                _this.select(_this.current);               
                if(_this.playing) {
                    _this.play();                    
                }                
            }
            
            _this.next = function() {
                _this.current++;
                if(_this.current > (_this.medias.length-1)) {
                    _this.current = 0;
                }
                _this.select(_this.current);               
                if(_this.playing) {
                    _this.play();                    
                }
            }
            
            _this.after = function(i) {
                var index = ++i;
                if(index > (_this.medias.length-1)) {
                    index = 0;
                }
                if(_this.medias.length > 1) {
                    _this.select(index);   
                }else {
                    _this.stop();
                }
                if(_this.playing) {
                    _this.play();                    
                }                
            }
            
            _this.play = function() {
                player.jPlayer("play");
                _this.playing = true;
            }
            
            _this.pause = function() {
                player.jPlayer("pause");
                _this.playing = false;
            }
            
            _this.stop = function() {
                player.jPlayer("stop");
                _this.playing = false;
            }
            
            _this.addMedia = function(media) {
                _this.medias.push(media);
                _this.select(_this.medias.length-1);
                var s = $.extend(info,media);
                $("#playlist").append('<li><b class="playlist-title">'+s.title+'</b><b class="playlist-author">'+s.author+'</b><i class="icon-remove jp-removeMedia"></i></li>');
                $("#playlist").find(".jp-removeMedia").click(function(e){
                    var index = $(this).parent().index();
                    console.log(index);
                    _this.after(index);
                    _this.removeMedia(index);                   
                })                 
                _this.play();
            }
            
            _this.removeMedia = function(index) {
                _this.medias.splice(index,1);
                $("#playlist>li").eq(index).remove();
            }
        
        }

希望大家能喜欢 

文件下载地址 360云盘下载

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jPlayer是一个基于HTML5的音频和视频播放器库。它是一个开源的JavaScript库,可以轻松地嵌入到网站中,用于播放音频和视频文件。以下是jPlayer的使用方法: 1. 引入jPlayer库文件 ```html <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script> </head> ``` 2. 创建播放器容器 ```html <div id="jquery_jplayer"></div> ``` 3. 初始化jPlayer ```javascript $(document).ready(function(){ $("#jquery_jplayer").jPlayer({ ready: function (event) { $(this).jPlayer("setMedia", { mp3: "path/to/mp3/file.mp3", m4a: "path/to/m4a/file.m4a", oga: "path/to/ogg/file.ogg", wav: "path/to/wav/file.wav" }); }, swfPath: "path/to/jplayer.swf", supplied: "mp3, m4a, oga, wav", wmode: "window", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); }); ``` 其中,setMedia()方法用于设置要播放的媒体文件路径,supplied属性用于指定支持的文件格式,swfPath属性用于指定jPlayer.swf文件的路径。通过jPlayer的配置,可以实现很多自定义的功能,比如进度条、音量控制、全屏等等。 以上就是jPlayer的基本使用方法。需要注意的是,jPlayer需要在HTTP服务器上才能正常工作,不能直接在本地文件中打开。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值