代码在小提琴上工作，但不在网站上[重复]
Posted
技术标签:
【中文标题】代码在小提琴上工作，但不在网站上[重复]【英文标题】：Code is Working on Fiddle but not on Website [duplicate] 【发布时间】：2013-03-12 04:48:50 【问题描述】：这在 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" >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+'" ><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" 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));
【问题讨论】：
控制台中的任何错误 试试这个，用这个函数写javascript。 $(document).ready(function() //你的 jquery 脚本 ); @ArunPJohny：完全没有错误。 @RajInevitable：用“jQuery”代替“$”可以吗？ @kurzweilguy 是的，你可以 【参考方案1】：您的网站 JS 代码需要等待 DOM 准备好，然后 jQuery 才能找到 #ubaPlayer 和 a[rel=vidbox] 元素（这是因为您的 script 在 HTML 之前声明，如果您的脚本可以逃脱它是在 html 之后定义的，尽管这不是一个好主意，因为您确实应该将 JavaScript 放在外部 .js 文件中）。
所以，用.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，所以它可以工作。
【讨论】：
已修复！完美的！谢谢，伙计们！ 还有 - doc.jsfiddle.net/faq.html以上是关于代码在小提琴上工作，但不在网站上[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Regexp_like 在调试器网站上工作，但不在 Oracle SQL Developer 上工作
无法打开流：没有这样的文件或目录，但目录存在。在本地主机上工作但不在实时站点上工作[重复]