I have been using the new Myspace for quite some time now, and I am really astonished on their design. It is really elegant and they have taken advantage of many HTML5 features. However there is one thing that, to me, outshines any other functionality and that is how you could navigate through myspace without having to stop the music playback. I noticed this a few days ago while listening to music, I changed the page and the music player would not reload. It would stay on its fixed position and the music would still play, even while the page was refreshing. And even if you log out, when you log back in the music player would play last song you were listening at exactly the time you left it on.
Now long story short, my question is: How do they achieve this? I am guessing they are saving the current track position in a cookie variable or in the local storage as it is playing, but what about the music player? How come it does not stop playing the song when navigating through myspace? Are they using any html5 feature to do this?
*note: I was inspecting their code because I thought they were using the jquery.load() function, but did not find any trace of that
Thanks to the insight given by #putvande, this Myspace feature is achieved using the HTML5 History API to change the browser URL without refreshing the page. Combining this with JQuery $.ajax can produce the effects shown in myspace, github and facebook. "arundavid" has a great explanation on this link at tinywall.info
Related
I'm trying to fast-forward a video playlist on a website to unlock access to the next one. Videos stream without the possibility of fast-forwarding, forwarding and I haven't any video control bar. I have to wait that they slowly finish. When I refresh the page, the video starts on the minute I've left it before. This is the relevant HTML code.
Looking at the video events I've found that it is an open source code of streaming videos, this is the whole relevant code I've copied from Firefox Debugger (with various events).
This is what I've tried on Firefox console to skip the video:
var video = videojs(document.querySelector("video"));
video.currentTime(video.duration());
but it just doesn't work (it reloads the page to the same video, basically it doesn't unlock the next one).
I've also tried to speed up the video with the following code:
document.querySelector("video").playbackRate = 2;
it speeds up but after a second the video gets stopped, and when I refresh the page the time I was at with the speed-up doesn't get saved.
How can I effectively fast-forward/skip it? I have no idea why this is happening.
The site you are accessing is an online learning platform and they will have built in controls to try to avoid people skipping ahead - this is fairly standard with online learning.
There are multiple ways they could do this for example:
report progress regularly from the browser and if it is too fast, reset video back to an earlier point.
monitor requests server side and again if the requests indicate too fast movement through the video, reset the client or respond to the requests with earlier video.
You can study the network traffic and you may be able to find a way round their mechanisms. This might even be arguably a useful use of your time if you are studying Javascript or video, although the tutors probably won't see it that way, but it may be tricky if they have multiple checks built in. You may also miss a mechanism which flags your activity on your account in the background to the tutors which might not be something you want happening...
So I have an HTML5 audio player which plays a radio stream, but upon page refresh or new page it will stop playing and have to be manually started again,
I was wondering how i would get it to remember if a user had clicked play ?
A lil Google and i found out that it's to do with cookies however i know nothing about cookies so any help will be great thanks!
With your clarification in comments that you're not specifically looking for a cookie-based solution, the best solution to this would be to use localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
One way you could do this:
// When the music player starts
window.localStorage.setItem("isPlaying", true);
// When the music player stops
window.localStorage.removeItem("isPlaying");
// When the page loads
if (window.localStorage.getItem("isPlaying") {
// Trigger the music player to start
}
my friends and I are making a website that acts like a radio station called Musare with playlists of YouTube videos that play after each other.
Recently Chrome introduced a new 'feature' that automatically disables autoplaying of videos in background tabs with no option to turn this off. This breaks our site because users don't want to keep going back to the site to start a song. This also broke other big sites, like YouTube playlists, Facebook chat notification sound and a lot of music sharing sites.
By now, a lot of sites have found solutions to bypass this, like dubtrack.fm, YouTube, Facebook and probably some other sites as well.
There is someone working on making an option for it at https://codereview.chromium.org/1414853003/, but that might take weeks or even months for it to be in the main Google Chrome.
If anyone knows how to bypass this, please let me know.
Thanks in advance :)
Already tried:
Starting another video before the current one ends - no success
Messing around with the Player Variables - no success
Other things probably - no success
Extra notes:
We are using the YouTube API. We use YT.Player and the youtubePlayer.loadVideoById(id)
SoundCloud streaming works fine with SC.Stream.
The source code for our project is at https://github.com/Musare/Musare
So I have found out how to bypass it finally, after many hours of trying and researching.
If you just initialize the iframe player of YouTube by using the YT.Player constructor, you can then just use the player variable and use yourPlayerVariable.loadVideoById(id).
You have to first go to the tab for it to start, but after that it will be able to load and play video's without you having to go back to the tab. If you remove and re-add the iframe, you will have to go back for it to start again.
I'm trying to implement Youtube's video player on [this][1] page.
I wanted the video player to play in a lightbox when a link was clicked on the page, or to pop up when you linked to the video ([example link][2]). I'm "mostly" happy with how it's working. The things that I am having issues with are these two separate things.
1) On some computers (not browser specific), sometimes (not always) the onPlayerReady (event) function will not run. The code for the pop-up is inside this function, so the video doesn't play. The only common factor I can find is that 100% of the time it works when you refresh the page.
2) When you click a link before the page is finished loading, the video player loads, however the video itself is not loaded. I assume the loadVideoById function isn't running. I'm not sure how to stop people from making this mistake. Again, it works perfectly if you close the player and reopen it.
When you visit from a link the page refreshes to a url that doesn't include the anchor in order to keep people from getting stranded on the linked page. This is not an error.
I'm not sure what you need to see since there is a live demo, so I'm not going to clutter this up by including a bunch of stuff you don't need. I will instead respond or edit with whatever code you need to see.
If you find any other glaring errors please let me know.
EDIT: The community was apparently helpless to even respond to my question. I worked around the problem using a different process so the question is no longer applicable. I'm disappointed in this community that came together to critique and edit my question, but had not a single suggestion for me.
EDIT2: Links Removed
After a lot of googling and researching, I have found out that iOS blocks autoplaying of html5 audio and video. Audio and Video can only be played as a response to a click event.
Now, I have another problem. I run a music website with a lot of user generated playlists. After clicking play, I make an ajax request to fetch the track URLs, and then load them and play them. iOS doesn't consider this as a synchronous click event to play music, so the music doesn't start playing on clicking the play button. I have to click on the player control's pause and play buttons to make it start playing (which basically just use pause() and play()).
I just can't think of what to do. Loading all the MP3 URLs before hand before the click event is not feasible. Is there any other way to get this done?
I know this is an ancient question, but for people coming across this there is a straightforward solution which is to play a short, silent sound directly from the click handler. Ideally, this would be a sound file you have already fetched and cached.
After that you'll be able to initiate playback from other handlers, even those without direct user interaction. (such as your AJAX/XHR response)
Okay, after a bit of fooling around and researching, I figured out that the only way to do a playlist fetch and play in one click, is to use a synchronous request instead of an AJAX request. The page will freeze up while the request loads, but it seems to be the only way out.