If you go visit a YouTube video and then click another video ( e.g a related video ) you see that the page is not entirely refreshing, Only the main video and related videos change, The rest of the page remains as it is.
I was wondering how they do that, If it's AJAX then why is the URL updating?
I've seen this technique on some other famous websites too , I was wondering how this works?!
You can change the URL without reloading the page, if the browser supports it.
Combined this with Ajax and you will see the behavior you are seeing.
Related
I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
How do IHeartRadio and 8Tracks keep the music playing without pause even when you go to a different url without any Pause?
My initial thought was that they would use something like Ajax to load content - but the fact that the browser favicon reloads makes me think it may be something else.
There are questions like this one that ask how is it possible to do so at all - but my question is how do established sites like IHeartRadio.com and 8Tracks.com do this?
If this question is not within StackOverflows scope, please let me know and I will remove it.
They are using ajax obviously.
8Tracks
Screen shot shows a browser loading 8Tracks's About us page. See initiator column (red mark) which is a javascript/xhr which means ajax.
To trigger the default browser is loading event: See:
How to have AJAX trigger the browser's loading indicator
I'm building my first chrome extension using JavaScript. It is required in it to identify the videos in the page a automatically. And then send the info. to web service. I'm not sure if saving the URL and the video tag will be a good idea to remember the video.What do you think? is it a good idea? and if it is OK, how i can identify the video tags which inside the page?
Console in google chrome will tell you if your loading things other than just the site.
Right click inspect page, then click console.
jsFiddle
I have a DailyMotion video embedded in my page, through an iFrame, within a div. If the user clicks on the video, it starts playing.
Is there a way to use jQuery to simulate the user clicking on the video, so that it will start playing automatically? From what I've read so far you can only use jQuery's click() with events attached with jQuery, which wouldn't work here. Can this be done? Thanks for reading.
EDIT:
Forgot to mention, I know you can add ?autoPlay=1 to the DailyMotion embed url, but I need to do this for several online video sites, some of which don't support autoplay, so I need to figure out if there's another way to do it.
In this case there's no need for jQuery at all, you can just add ?autoPlay=1 to the URL, here's your fiddle updated with the change.
No, you can't fake interaction with a document in an iframe from another domain, jQuery or otherwise. It would be a pretty serious security hole if you could frame a third-party site (eg that the user happened to be logged into) and started operating it on their behalf.
When embedding a flash object, is there a way to determine when it's fully loaded?
That's my basic question, but for anyone interested in the details behind it:
I am using the (DOMWindow) jQuery plugin. For those not familiar, it's a basic overlay the appears centered on the page, above all other content which is dimmed.
Inside of the DOMWindow, I am embedded a YouTube video. The markup used to embed the video is AJAX injected.
The DOMWindow has a built in loading graphic, but the problem I am having is that the AJAX GET request is completed almost instantly, and for 3-5 seconds, I'm stuck looking at a white rectangle while waiting for the YouTube video to load.
If I could figure out how to determine when it's finished loading, I could code a more graceful loading scheme (using a animated spinner) inside of the DOMWindow.
You should take a look at this page Youtube Player Javascript API. Subscribing to the onStateChange Event and looking for it to return 5 appears to be what you want to do.
I'll leave my original answer, in case it might still be handy. It is below.
You may want to look at this blog entry. He is passing Flash events to javascript to monitor a video. He specifically mentions waiting for the movie to dl and attach to the player. I'm not sure these techniques work with the youtube player.
It you're looking for a more general Flash reference, Flash makes available OnProgress, OnReadyStateChange and PercentLoaded as Javascript properties of the OBJECT or EMBED element. http://www.adobe.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html
The ultimate way to do this is to get some kind of confirmation from the Flash that it is ready to display (as with, in this case, a YouTube API).
Short of that, there's no objective point when a Flash movie is finished loading. Once the first frame is loaded it can display initial content while later content loads, and even if the root SWF file is loaded, it may need to load more external content before it can display anything. (YouTube probably falls into this latter category, as will any service where the content is loaded by the container SWF.)