代码正在使用小提琴，但不在网站上

时间：2013-03-12 04:48:50

标签： javascript jquery html5 audio jsfiddle

这在Fiddle上工作得很好，但在我的网站上不太好。我似乎无法弄清楚差异。

我已经尝试删除整个Videobox包含，但这并没有解决它。

我也意识到jQuery和Mootools有点多，但我真的很喜欢Videobox，我真的很喜欢音频播放器。

就我网站上的工作而言，除了我的javascript中的第二个功能外，一切都按照应有的方式工作。

这是小提琴： http://jsfiddle.net/HM8m7/4/

我的网站的HTML： 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Music</title>

<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />

<link rel="stylesheet" href="libs/css/styles.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="src/jquery.ubaplayer.js"></script>
<script>
       jQuery.noConflict();
       jQuery(function () {
           jQuery("#ubaPlayer").ubaPlayer({
               codecs: [{
                 name: "MP3",
                 codec: 'audio/mpeg;'
               }]
           });

       });

       jQuery('a[rel=vidbox]').click(function () {

           if (jQuery("#ubaPlayer").ubaPlayer("playing") === true) {
              jQuery("#ubaPlayer").ubaPlayer("pause");
             }
         return false;
       });
</script>
</head>

<body>
<div id="content_wrapper">    
 <div id="table_container">
  <table>
    <tr>
      <th>Title</th>
    </tr>
    <tr>
      <td><div id="ubaPlayer"></div>
        <ul class="controls">
        <a href="http://www.youtube.com/v/2sAnENc6ObI&autoplay=1" rel="vidbox" title="The Rainbox Connection - Live at the Berklee Performance Center"><img src="playbtn.png" class="fakeplay" alt="Play Button">The Rainbow Connection (Video)</a>
        <ul class="controls">
        <li><a class="audioButton" href="mp3/closetoyou.mp3">
        Close to You</a></li>
      </td>
    </tr>
 </table>
</div>
</div>
</body>
</html>

音频播放器脚本： 

(function($) {
var defaults = {
    audioButtonClass: "audioButton",
    autoPlay: null,
    codecs: [{
        name: "OGG",
        codec: 'audio/ogg; codecs="vorbis"'
    }, {
        name: "MP3",
        codec: 'audio/mpeg'
    }],
    continuous: false,
    extension: null,
    flashAudioPlayerPath: "libs/swf/player.swf",
    flashExtension: ".mp3",
    flashObjectID: "audioPlayer",
    loadingClass: "loading",
    loop: false,
    playerContainer: "player",
    playingClass: "playing",
    swfobjectPath: "libs/swfobject/swfobject.js",
    volume: 1
},
    currentTrack, isPlaying = false,
    isFlash = false,
    audio, $buttons, $tgt, $el, playTrack, resumeTrack, pauseTrack, methods = {
        play: function(element) {
            $tgt = element;
            currentTrack = _methods.getFileNameWithoutExtension($tgt.attr("href"));
            isPlaying = true;
            $tgt.addClass(defaults.loadingClass);
            $buttons.removeClass(defaults.playingClass);

            if (isFlash) {
                if (audio) {
                    _methods.removeListeners(window);
                }
                audio = document.getElementById(defaults.flashObjectID);
                _methods.addListeners(window);
                audio.playFlash(currentTrack + defaults.extension);
            } else {
                if (audio) {
                    audio.pause();
                    _methods.removeListeners(audio);
                }
                audio = new Audio("");
                _methods.addListeners(audio);
                audio.id = "audio";
                audio.loop = defaults.loop ? "loop" : "";
                audio.volume = defaults.volume;
                audio.src = currentTrack + defaults.extension;
                audio.play();
            }
        },

        pause: function() {
            if (isFlash) {
                audio.pauseFlash();
            } else {
                audio.pause();
            }

            $tgt.removeClass(defaults.playingClass);
            isPlaying = false;
        },

        resume: function() {
            if (isFlash) {
                audio.playFlash();
            } else {
                audio.play();
            }
            $tgt.addClass(defaults.playingClass);
            isPlaying = true;
        },

        playing: function() {
            return isPlaying;
        }
    },

    _methods = {
        init: function(options) {
            var types;

            //set defaults
            $.extend(defaults, options);
            $el = this;

            //listen for clicks on the controls
            $(".controls").bind("click", function(event) {
                _methods.updateTrackState(event);
                return false;
            });
            $buttons = $("." + defaults.audioButtonClass);

            types = defaults.codecs;
            for (var i = 0, ilen = types.length; i < ilen; i++) {
                var type = types[i];
                if (_methods.canPlay(type)) {
                    defaults.extension = [".", type.name.toLowerCase()].join("");
                    break;
                }
            }

            if (!defaults.extension || isFlash) {
                isFlash = true;
                defaults.extension = defaults.flashExtension;
            }

            if (isFlash) {
                $el.html("<div id='" + defaults.playerContainer + "'/>");
                $.getScript(defaults.swfobjectPath, function() {
                    swfobject.embedSWF(defaults.flashAudioPlayerPath, defaults.playerContainer, "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, {
                        id: defaults.flashObjectID
                    }, _methods.swfLoaded);
                });
            } else {
                if (defaults.autoPlay) {
                    methods.play(defaults.autoPlay);
                }
            }
        },

        updateTrackState: function(evt) {
            $tgt = $(evt.target);
            if (!$tgt.hasClass("audioButton")) {
                return;
            }
            if (!audio || (audio && currentTrack !== _methods.getFileNameWithoutExtension($tgt.attr("href")))) {
                methods.play($tgt);
            } else if (!isPlaying) {
                methods.resume();
            } else {
                methods.pause();
            }
        },

        addListeners: function(elem) {
            $(elem).bind({
                "canplay": _methods.onLoaded,
                "error": _methods.onError,
                "ended": _methods.onEnded
            });
        },

        removeListeners: function(elem) {
            $(elem).unbind({
                "canplay": _methods.onLoaded,
                "error": _methods.onError,
                "ended": _methods.onEnded
            });
        },

        onLoaded: function() {
            $buttons.removeClass(defaults.loadingClass);
            $tgt.addClass(defaults.playingClass);

            audio.play();
        },

        onError: function() {
            $buttons.removeClass(defaults.loadingClass);
            if (isFlash) {
                _methods.removeListeners(window);
            } else {
                _methods.removeListeners(audio);
            }
        },

        onEnded: function() {
            isPlaying = false;
            $tgt.removeClass(defaults.playingClass);
            currentTrack = "";
            if (isFlash) {
                _methods.removeListeners(window);
            } else {
                _methods.removeListeners(audio);
            }

            if (defaults.continuous) {
                var $next = $tgt.next().length ? $tgt.next() : $(defaults.audioButtonClass).eq(0);
                methods.play($next);
            }

        },

        canPlay: function(type) {
            if (!document.createElement("audio").canPlayType) {
                return false;
            } else {
                return document.createElement("audio").canPlayType(type.codec).match(/maybe|probably/i) ? true : false;
            }
        },

        swfLoaded: function() {
            if (defaults.autoPlay) {
                setTimeout(function() {
                    methods.play(defaults.autoPlay);
                }, 500);
            }
        },

        getFileNameWithoutExtension: function(fileName) {
            //this function take a full file name and returns an extensionless file name
            //ex. entering foo.mp3 returns foo
            //ex. entering foo returns foo (no change)
            var fileNamePieces = fileName.split('.');
            fileNamePieces.pop();
            return fileNamePieces.join(".");
        }
    };

$.fn.ubaPlayer = function(method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === "object" || !method) {
        return _methods.init.apply(this, arguments);
    } else {
        $.error("Method " + method + " does not exist on jquery.ubaPlayer");
    }
};})(jQuery);

视频脚本： 

var Videobox = {

init: function (options) {
    // init default options
    this.options = Object.extend({
        resizeDuration: 400,    // Duration of height and width resizing (ms)
        initialWidth: 250,      // Initial width of the box (px)
        initialHeight: 250,     // Initial height of the box (px)
        defaultWidth: 625,      // Default width of the box (px)
        defaultHeight: 350, // Default height of the box (px)
        animateCaption: true,   // Enable/Disable caption animation
        flvplayer: 'swf/flvplayer.swf'
    }, options || {});

    this.anchors = [];
    $A($$('a')).each(function(el){
        if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
            el.addEvent('click', function (e) {
      e = new Event(e);
      e.stop();
      this.click(el);
            }.bind(this));
            this.anchors.push(el);
        }
}, this);

    this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
    this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);

    this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
    this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
    new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
    this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
    this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
    new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

    var nextEffect = this.nextEffect.bind(this);
    this.fx = {
        overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
        center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
        bottom: this.bottom.effect('margin-top', {duration: 400})
    };

},

click: function(link) {

        return this.open (link.href, link.title, link.rel);

},
open: function(sLinkHref, sLinkTitle, sLinkRel) {
    this.href = sLinkHref;
    this.title = sLinkTitle;
    this.rel = sLinkRel;
    this.position();
    this.setup();
    this.video(this.href);
    this.top = Window.getScrollTop() + (Window.getHeight() / 15);
    this.center.setStyles({top: this.top+'px', display: ''});
    this.fx.overlay.start(0.8);
    this.step = 1;
    this.center.setStyle('background','#fff url(loading.gif) no-repeat center');
    this.caption.innerHTML = this.title;
    this.fx.center.start({'height': [this.options.contentsHeight]});
},

setup: function(){
    var aDim = this.rel.match(/[0-9]+/g);
    this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
    this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;

},

position: function(){
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
},

video: function(sLinkHref){
    if (sLinkHref.match(/youtube\.com\/watch/i)) {
  this.flash = true;
        var hRef = sLinkHref;
        var videoId = hRef.split('=');
        this.videoID = videoId[1];
        this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
        this.so.addParam("wmode", "transparent");
    }
    else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
  this.flash = true;
        var hRef = sLinkHref;
        var videoId = hRef.split('/');
        this.videoID = videoId[4];
        this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
        this.so.addParam("wmode", "transparent");
    }
    else if (sLinkHref.match(/google\.com\/videoplay/i)) {
  this.flash = true;
        var hRef = sLinkHref;
        var videoId = hRef.split('=');
        this.videoID = videoId[1];
        this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
        this.so.addParam("wmode", "transparent");
    }
    else if (sLinkHref.match(/ifilm\.com\/video/i)) {
      this.flash = true;
        var hRef = sLinkHref;
        var videoId = hRef.split('video/');
        this.videoID = videoId[1];
        this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
        this.so.addVariable("flvbaseclip", this.videoID+"&");
        this.so.addParam("wmode", "transparent");
    }
    else if (sLinkHref.match(/\.mov/i)) {
      this.flash = false;
        if (navigator.plugins && navigator.plugins.length) {
      this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
  } else {
    this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
  }
    }
    else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) {
    this.flash = false;
     this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>'
    }
    else if (sLinkHref.match(/\.flv/i)) {
     this.flash = true;
     this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
    }
    else {
      this.flash = true;
        this.videoID = sLinkHref;
        this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
    }
},

nextEffect: function(){
    switch (this.step++){
    case 1:
        this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
        break;
        this.step++;
    case 2:
        this.center.setStyle('background','#fff');
        this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
        this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
        if (this.options.animateCaption){
            this.fx.bottom.set(-this.bottom.offsetHeight);
            this.bottomContainer.style.height = '';
            this.fx.bottom.start(0);
            break;
        }
        this.bottomContainer.style.height = '';
        this.step++;
    }
},

close: function(){
    this.fx.overlay.start(0);
    this.center.style.display = this.bottomContainer.style.display = 'none';
    this.center.innerHTML = '';
    return false;
}};window.addEvent('domready', Videobox.init.bind(Videobox));

1 个答案:

答案 0 :(得分：4)

您的网站JS代码需要等待DOM准备好，然后jQuery才能找到#ubaPlayer和a[rel=vidbox]元素（这是因为您的script在HTML之前声明，您可以获得如果您的脚本是在html之后定义的，那就远离它了，虽然这不是一个好主意，因为您真的应该在外部.js文件中使用JavaScript。

因此，请用.ready()包装它，以便在DOM准备就绪后运行脚本：

   jQuery(document).ready(function () {
       jQuery("#ubaPlayer").ubaPlayer({
           codecs: [{
             name: "MP3",
             codec: 'audio/mpeg;'
           }]
       });
       jQuery('a[rel=vidbox]').click(function () {
           if (jQuery("#ubaPlayer").ubaPlayer("playing") === true) {
               jQuery("#ubaPlayer").ubaPlayer("pause");
           }
           return false;
       });

   });

小提琴有on DOM ready，所以它有效。

相关问题
最新问题