代码正在小提琴上工作但不在网站上

这在Fiddle上运行正常，但在我的网站上不太好。 我似乎无法弄清楚差异。

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

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

至于在我的网站上工作的东西，一切都按照它应该的方式工作，除了我的javascript中的第二个function。

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

我的网站的HTML：

             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; });    
 
 
 
 
Title
 
 
 
 
 The Rainbow Connection (Video) 
 
 Close to You
 
 
 
 
 
   

音频播放器脚本：

 (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("
"); $.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); 

video脚本：

 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 =''; } else { this.other = ''; } } else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) { this.flash = false; this.other = '' } 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)); 

Answer 1

您的网站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 ，所以它可以工作。