代码在小提琴上工作，但不在网站上 [英] Code is Working on Fiddle but not on Website
本文介绍了代码在小提琴上工作，但不在网站上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这在小提琴上工作得很好，但在我的网站上不太好。我似乎无法找出差异。
我已经尝试删除整个Videobox包含，并没有解决它。
我也意识到jQuery和Mootools有点多，但我非常喜欢Videobox，而且我非常喜欢音频播放器。
至于在我的网站上运行的东西，除JavaScript中的第二个函数外，一切都按照它的方式工作。
这是小提琴： http://jsfiddle.net/HM8m7/ 4 /
我的网站的HTML：
<！doctype html>
< html>
< head>
< meta charset =UTF-8>
< title>音乐< / title>
< script type =text / javascriptsrc =videobox / js / mootools.js>< / script>
< script type =text / javascriptsrc =videobox / js / swfobject.js>< / script>
< script type =text / javascriptsrc =videobox / js / videobox.js>< / script>
< link rel =stylesheethref =videobox / css / videobox.csstype =text / cssmedia =screen/>
< link rel =stylesheethref =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>标题< / th>
< / tr>
< tr>
< td>< div id =ubaPlayer>< / div>
< ul class =controls>
< a href =http://www.youtube.com/v/2sAnENc6ObI&autoplay=1 =vidboxtitle =The Rainbox Connection - 住在伯克利演艺中心>< ; img src =playbtn.pngclass =fakeplayalt =播放按钮>彩虹连接（视频）< / a>
< ul class =controls>
< li>< a class =audioButtonhref =mp3 / closetoyou.mp3>
接近您< / li>< / a>< / li>
< / td>
< / tr>
< / table>
< / div>
< / div>
< / body>
< / html>
音频播放器脚本
（函数（$）{
var defaults = {
audioButtonClass：audioButton，
autoPlay：null，
编解码器：[{
名称：OGG，
编解码器：'audio / ogg; codecs =vorbis'
}，{
名称：MP3，
codec：'audio / mpeg'
}]，
连续：false，
扩展名：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，
音频，$按钮，$ tgt，$ el，playTrack，resumeTrack，pauseTrack，methods = {
play：function（element）{
$ tgt = elem ent;
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（）;
暂停：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;
}，
正在播放：function（）{
return isPlaying;
}
}，
_methods = {
init：function（options）{
var types;
//设定预设值
$ .extend（预设值，选项）;
$ el = this;
//监听点击控件
$（。controls）。bind（click，function（event）{
_methods.updateTrackState（event）;
返回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（）;
休息;
}
}
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; （音频& amp; currentTrack！== _methods.getFileNameWithoutExtension（$ tgt.attr（href））））{
methods.play（
）
$ TGT）;
} else if（！isPlaying）{
methods.resume（）;
} else {
methods.pause（）;
$ b addListeners：function（elem）{
$（elem）.bind（{
canplay：_methods.onLoaded，
错误：_methods.onError，
ended：_methods.onEnded
}）;
}，
removeListeners：function（elem）{
$（elem）.unbind（{
canplay：_ methods.onLoaded，
错误：_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）{
返回false;
} else {
return document.createElement（audio）。canPlayType（type.codec）.match（/ maybe | probably / i）？真假;
swfLoaded：function（）{
if（defaults.autoPlay）{
setTimeout（function（）{
methods.play（defaults.autoPlay）;
}，500）;
getFileNameWithoutExtension：function（fileName）{
//这个函数接受一个完整的文件名并返回一个无扩展名的文件名
/ / EX。输入foo.mp3返回foo
// ex。输入foo返回foo（不变）
var fileNamePieces = fileName.split（'。'）;
fileNamePieces.pop（）;
返回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 +在jquery.ubaPlayer上不存在）;
}
};}）（jQuery）;
Videobox Script：
var Videobox = {
init：function（options）{
//初始化默认选项
this.options = Object .extend（{
resizeDuration：400，//高度和宽度调整大小（ms）的持续时间
initialWidth：250，//框的初始宽度（px）
initialHeight：250，/ / box的初始高度（px）
defaultWidth：625，//框的默认宽度（px）
defaultHeight：350，//框的默认高度（px）
animateCaption ：true，//启用/禁用字幕动画
flvplayer：'swf / flvplayer.swf'
}，options || {}）;
this.anchors = [];
$ A（$$（'a'））。每个（函数（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）;
新元素（'a'）。setProperties（{id：'lbCloseLink'，href：'＃'}）。injectInside（this.bottom）.onclick = this.overlay.onclick = this.close.bind这个）;
this.caption = new Element（'div'）。setProperty（'id'，'lbCaption'）。injectInside（this.bottom）;
this.number = new Element（'div'）。setProperty（'id'，'lbNumber'）。injectInside（this.bottom）;
新元素（'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\\\\/videoplay/i））{
this.flash = true;
var hRef = sLinkHref;
var videoId = hRef.split（'='）;
this.videoID = videoId [1];
this.so =新的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& amp; navigator.plugins.length）{
this.other ='< object id =qtboxMovietype =video / quicktimecodebase =http：/ /www.apple.com/qtactivex/qtplugin.cabdata ='+ sLinkHref +'width ='+ this.options.contentsWidth +'height ='+ this.options.contentsHeight +'>< param name =srcvalue ='+ sLinkHref +'/>< param name =scalevalue =aspect/>< param name =controllervalue =true/>< param name =autoplayvalue =true/>< param name =bgcolorvalue =＃000000/>< param name =enablejavascriptvalue =true/><对象>';
} else {
this.other ='< object classid =clsid：02BF25D5-8C17-4B23-BC80-D3488ABDDC6Bcodebase =http://www.apple.com/qtactivex/qtplugin .cabwidth ='+ this.options.contentsWidth +'height ='+ this.options.contentsHeight +'id =qtboxMovie>< param name =srcvalue ='+ sLinkHref +' />< param name =scalevalue =aspect/>< param name =controllervalue =true/>< param name =autoplayvalue =true/> ;< param name =bgcolorvalue =＃000000/>< param name =enablejavascriptvalue =true/>< / object>';
else if（sLinkHref.match（/\.wmv/i）|| sLinkHref.match（/\.asx/i））{
this .flash = false;
this.other ='< object NAME =PlayerWIDTH ='+ this.options.contentsWidth +'HEIGHT ='+ this.options.contentsHeight +'align =lefthspace =0 type =application / x-oleobjectCLASSID =CLSID：6BF52A52-394A-11d3-B153-00C04F79FAA6>< param NAME =URLVALUE ='+ sLinkHref +'>< param><< ; param NAME =AUTOSTARTVALUE =false>< / param>< param name =showControlsvalue =true>< / param>< embed WIDTH ='+ this.options .contentsWidth +'HEIGHT ='+ this.options.contentsHeight +'align =lefthspace =0SRC ='+ sLinkHref +'TYPE =application / x-oleobjectAUTOSTART =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]}）;
休息;
this.step ++;
案例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）;
休息;
}
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 ='';
返回false;
}}; window.addEvent（'domready'，Videobox.init.bind（Videobox））;
解决方案
您的网站JS代码需要等待DOM准备好之前jQuery可以找到 #ubaPlayer 和一个[rel = vidbox] 元素（这是因为你的脚本是在HTML之前声明的，如果你的脚本是在html之后定义的，你可以侥幸使用它，虽然不是一个好主意，因为你真的应该把你的JavaScript放在外部 .js 文件）。
因此，用
.ready（）包装它，以便在DOM准备就绪后运行脚本： jQuery（document）.ready（function（）{
jQuery（＃ubaPlayer）。ubaPlayer（{
编解码器：[{
名称：MP3，
编解码器：'audio / mpeg;'
}]
}）;
jQuery（'a [ rel = vidbox]'）。click（function（）{
if（jQuery（＃ubaPlayer）。ubaPlayer（playing）=== true）{
jQuery（＃ubaPlayer） .ubaPlayer（暂停）;
}
返回false;
}）;
}）;
DOM准备时提琴<
This is working fine on Fiddle, but not so fine on my site. I can't seem to figure out the difference.
I've already tried removing the whole Videobox inclusion, and that didn't fix it.
I also realize that jQuery and Mootools is a bit much, but I really like the Videobox, and I really like the audio player.
As far as things working on my site, everything works the way it should, except for the second function in my javascript.
Here's the Fiddle: http://jsfiddle.net/HM8m7/4/
My Site's 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>
Audio Player Script:
(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);
Videobox Script:
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));
解决方案
Your website JS code needs to wait for DOM ready before the jQuery can find the #ubaPlayer and a[rel=vidbox] elements (This is because your script is declared before the HTML, you could get away with it if your script was defined after the html, albeit not a great idea because you really should have your JavaScript in a external .js file).
So, wrap it with .ready() so that your scripts run after the DOM is ready:
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;
});
});
The fiddle has on DOM ready, so it works.
这篇关于代码在小提琴上工作，但不在网站上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
