HTML5 Audio Player is not working on my mobile theme, but it works well on my desktop theme
javascript of my html5 player:
<script type="text/javascript">
$(document).ready(function(){
$("#JQAudioPlayer1").fdAudioPlayer({sourceURL:"/player_files/test6.xml",swfURL:"http://example.de/player_files/jplayer.swf",solution:"html,flash",mouseWheelEnabled:true,trackAutostart:false,trackRandom:true,trackRepeat:true,trackVolume:70,trackTitleScrollEnabled:true,trackTitleScrollDuration:5000,trackTitleScrollDelay:3000,trackTitleFormat:"_ALBUM_ - _TRACK_",timeShowHour:false,seekBarTipEnabled:true,playlistState:"expanded",playlistAnimationEasing:"easeOutQuad",playlistAnimationDuration:200,playlistButtonEnabled:true,playlistButtonString:"PLAYLIST",playlistVisibleRowCount:7,playlistAutoResize:false,thumbnailsScrollingStep:1,thumbnailsScrollingDuration:500,thumbnailsScrollingEasing:"easeOutQuad",thumbTipEnabled:false});
});
html code of the player on desktop theme:
<script type="text/javascript">
$(document).ready(function(){
$("#JQAudioPlayer1").fdAudioPlayer({sourceURL:"/wp-content/themes/audio/test6.xml",swfURL:"/player_files/jplayer.swf",solution:"html,flash",mouseWheelEnabled:true,trackAutostart:false,trackRandom:true,trackRepeat:true,trackVolume:70,trackTitleScrollEnabled:true,trackTitleScrollDuration:5000,trackTitleScrollDelay:3000,trackTitleFormat:"_ALBUM_ - _TRACK_",timeShowHour:false,seekBarTipEnabled:true,playlistState:"expanded",playlistAnimationEasing:"easeOutQuad",playlistAnimationDuration:200,playlistButtonEnabled:true,playlistButtonString:"PLAYLIST",playlistVisibleRowCount:7,playlistAutoResize:false,thumbnailsScrollingStep:1,thumbnailsScrollingDuration:500,thumbnailsScrollingEasing:"easeOutQuad",thumbTipEnabled:false});
});
html code of the player on mobile theme:
<script type="text/javascript">
$(document).ready(function(){
$("#JQAudioPlayer1").fdAudioPlayer({sourceURL:"http://www.example.de/wp-content/themes/audio/test6.xml",swfURL:"/player_files/jplayer.swf",solution:"html,flash",mouseWheelEnabled:true,trackAutostart:false,trackRandom:true,trackRepeat:true,trackVolume:70,trackTitleScrollEnabled:true,trackTitleScrollDuration:5000,trackTitleScrollDelay:3000,trackTitleFormat:"_ALBUM_ - _TRACK_",timeShowHour:false,seekBarTipEnabled:true,playlistState:"expanded",playlistAnimationEasing:"easeOutQuad",playlistAnimationDuration:200,playlistButtonEnabled:true,playlistButtonString:"PLAYLIST",playlistVisibleRowCount:7,playlistAutoResize:false,thumbnailsScrollingStep:1,thumbnailsScrollingDuration:500,thumbnailsScrollingEasing:"easeOutQuad",thumbTipEnabled:false});
});
Any help would be appreciated.
I'm sure you have noted sourceURL changes in each case.
This is why your player fails. He certainly cannot find files.
You should find where the sourceURL path is generated, and ensure it is the same for all.
Look:
/player_files/test6.xml ≠ /wp-content/themes/audio/test6.xml
{sourceURL:"**/player_files/test6.xml**",swfURL:"**http://example.de/player_files/jplayer.swf**",
{sourceURL:"**/wp-content/themes/audio/test6.xml**",swfURL:"**/player_files/jplayer.swf**",solution:"html,flash",
{sourceURL:"http://www.example.de/wp-content/themes/audio/test6.xml",swfURL:"/player_files/jplayer.swf",;
Related
I am trying to make wall script like google+ but i have one problem. Users can share pictures and videos I've created a base. However, the tab does not work currently. Reason ... <script type="text/javascript"> </ script> I think it is relevant. .... tags into the tags I add the script call. But by far misunderstood. but I could not. I'm giving you my code below.
Head
<head>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
</head>
Call javascript function This function for post cancel or submit
<script type="text/javascript">
$(function(){
$(".content").focus(function(){
$(this).animate({"height": "55px",}, "fast" );
$("#button_hide").slideDown("fast");
return false;
});
$("#cancel").click(function(){
$(".content").animate({"height": "30px",}, "fast" );
$("#button_hide").slideUp("fast");
return false;
});
});
</script>
and this javascript function is for Photo and video click open box also this function is not working now.
<script type="text/javascript">
$(document).ready(function(){
$(".oculto").hide();
$(".MO").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});
</script>
This link is my tutotiral link. If you check this page you can understand me. If you click photo photo share panel will not open also video share panel not working.
http://goo.gl/i98FNX
What is there in this file js/jquery.min2.js? If it is the jquery library, please remove it because you have a google cdn code in the same file. In addition, you are using a old version of jquery. Since 1.4 many things have changed in jQuery so, please use the latest version of jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
I think that leads up the tab portions. Just like facebook. I understand that you have used bubble box. If you want three different areas. For example: status, video, link to share, create the base area. This will provide you more convenience.
You can write your php code easier.
Because sharing is currently part of three different courses you want to use a single form. But you can spend more time for it. However, creating three forms that will be easier if you make sharing.
Share your theme really nice congratulations. However troubling.
I've studied your own scripts. Bonding between the lines of the script too much. This is not true. Create a new js file and then type into the function you are using. Gators later use the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/yourscript.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
In this way, your problems will disappear.
I'm working with Foundation 4 framework. I've been trying to include the Orbit slide into my website, but I can't seem to get it to work.
So I followed the steps in Foundation documentation. I've included all necessary scripts
<script type="text/javascript" src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).foundation();
</script>
Then I tried to add a simple slideshow
<ul data-orbit>
<li>
Test1
</li>
<li>
Test2
</li>
<li>
Test3
</li>
</ul>
But, instead of generating a slideshow all I get is an unnumbered list. I triple checked to make sure I didn't misspell anything. Here's an example of what I get.
In my expirience Foundation's scrips are a little messy, so try to do the following:
place modernizr inside the <head>
reference the following js at the end of your <body> just before the </body> tag :
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
That way you load Zepto in modern browsers, and jquery in the old ones, then you load Foundation, and then you tell the document to grab the format. There's no need to load the orbit js, as it is inside the min version of Foundation.
The code is documented at http://foundation.zurb.com/docs/javascript.html
I also had this problem.
The the prot fix that ezabaw used worked for me.
The orbit.js is required for this feature.
TCasa
Dan and TCasa are right. Do not forget foundation.orbit.js . It's essential.
So put this just before the </body> end tag:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.js"></script>
<script src="js/foundation.orbit.js"></script> // <-- Don't forget this one
<script>
$(document).foundation();
</script>
Make sure the paths are right too.
I used Foundation in combination with Compass so my paths were : js/foundation/foundation.js and js/foundation/foundation.orbit.js.
Good luck
There is an easier way.
The Slider needs to be initalized after the page is fully loaded.
For me, after following all aforementioned steps in other answers the following worked
<script>
$(document).ready(function() { $(document).foundation(
//add custom options to orbit
'orbit', {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: true
);});
</script>
The additional custom options can be found here Link to Foundation Docs
A working example is here (helped me solving this issue)
I am embedding a Youtube video on a website using swfObject so I can manipulate it using Youtube Player API. However, I am in the process of rewriting the site in Coffeescript and am stuck on this problem.
Here is the html:
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/swfobject.js">//embedding youtube videos</script>
<script type="text/javascript" src="coffee/test.js"></script>
</head>
<body>
<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>
</body>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
swfobject.embedSWF( "http://www.youtube.com/v/yeClJneSNXA&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
</script>
</html>
The following code works:
ytplayer = document.getElementById('ytplayer');
ytplayer.playVideo();
However, the equivalent (I think) coffeescript code DOES NOT:
ytplayer = document.getElementById("ytplayer")
ytplayer.playVideo()
Which compiles to the following JS:
(function() {
var ytplayer;
ytplayer = document.getElementById("ytplayer");
ytplayer.playVideo();
}).call(this);
It gives me the following error in Firebug:
ytplayer.playVideo is not a function
return ytplayer.playVideo();
This is most likely because the YouTube player hasn't finished loading before you try to play the YouTube video.
Try this:
window.onYouTubePlayerReady = (playerid) ->
ytplayer = document.getElementById(playerid)
ytplayer.playVideo()
This puts your code in the onYouTubePlayerReady callback that YouTube uses to let you know the player is ready.
I'm assuming the JS code worked because you ran it inside of Firebug? If so, that would make sense because by the time you enter that command into the console, the YouTube player will most likely be loaded.
I'm working on an app that uses a jQuery UI plugin, which in turn uses the Raphael library. Things work great on iOS and normal browsers, but on android I am getting the error:
ReferenceError: can't find variable Raphael
raised in this line of the init method of the jQuery UI plugin I wrote (jquery.ui.sketch.js):
var p = Raphael(el.attr("id"));
This is the head of my index.html that I'm using to mock-up my app:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/raphael.js"></script>
<script type="text/javascript" src="/js/raphael.json.js"></script>
<script type="text/javascript" src="jquery.ui.sketch.js"></script>
And the body looks like:
<body id="home">
... a bunch of divs
<script type="text/javascript">
$(function(){
// ...jquery stuff that works fine
// initialize sketch widget, FAILS HERE ON ANDROID:
$('#paper').sketch({
saved: function(e,ui){
savedDrawing = ui;
alert("saved JSON to a global variable 'savedDrawing'");
},
// these could be bound to an element if we want:
startdrawing: function(){
console.log("figure started");
},
donedrawing: function(){
console.log("finished drawing");
}
});
</script>
I'm kind of stumped.
Seems the issue is simply that Raphael doesn't support Android (or rather has no way of doing SVG). Duh. Apparently v3.0 browser has SVG support.
http://www.javascriptkit.com/script/script2/plugindetect.shtml
I am trying to detect flash plugin with Javascript from the above url, but the code doesn't seem to work for IE. Am I doing anything wrong here?
I just need to see whether the flash plugin is installed on the browser or not.
if (pluginlist.indexOf("Flash")== -1)
{
alert("You do not have flash player plugin installed.Please install flash player");
window.location = "/home";
}
swfobject is the established quasi-standard for dealing with flash in JavaScript.
There's a tutorial for Detecting Flash Player versions and embedding SWF files with SWFObject 2
i too tried the same flash plugin but in different link. I tried the following javascript code:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so =
new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.write("flashcontent");
</script>
Prepare an HTML element that will hold our Flash movie. The content placed in the ‘holder’ element will be replaced by the Flash content, so users with the Flash plug-in installed will never see the content inside this element. This feature has the added bonus of letting search engines index your alternate content.
var so = new SWFObject(swf, id, width, height, version, background-color
[, quality, xiRedirectUrl, redirectUrl, detectKey]);
And get succeeded. You can also try this code and tell me what happens. I hope you will get success. All The Best.
I tried to use the same plugin of the link you posted.
I used following code and it worked fine in my IE too..
<html>
<head>
<script language="javascript" type="text/javascript" src="plugins.js" ></script>
<script language="javascript" type="text/javascript">
if (pluginlist.indexOf("Flash")== -1)
{
alert("You do not have flash player plugin installed.Please install flash player");
window.location = "/home";
}
else{
alert("You have it installed");
}
</script>
</head>
<body>
</body>
</html>
I think the problem seems with the way of writing tag.
Have you made it exactly like mine? Or you can go with my HTML.
Thanks!
Hussain