Alright, I'm working on one project which involves html5 audio, in addition to that a video is shown while audio is playing (Just video, no controls etc). Video is a visualisation (sometimes called equaliser) of audio that is playing, made beforehand in adobe after effects. both files (video and audio) are same length e.g. 3 min 20 sec. I need a way to synchronise both, as video might load slower than audio or vice versa. Therefore I need to make it so that on computers with slow internet connection if video stops loading at some point and starts buffering I need to pause audio, and once video resumes start audio again, both at exactly same time, also when user skips to a certain bit in a song, video should skip to that bit as well, I'll use custom api made player for video so there would be no controls on video, only on soundcloud player.
It is almost as if I was using soundcloud custom player to control video. I'm struggling to find any resources on this anywhere, and would really like to know how to achieve this functionality.
javascript or jQuery solutions are preferable.
What makes it even more complicated is that I use SoundCloud's custom player to play songs:
http://developers.soundcloud.com/docs/custom-player#
And upload videos to Vimeo/YouTube (all done to decrease load on a website)
Check here: http://html5demos.com/two-videos
The sample is for syncing 2 videos, but with some hacking probably you can manage to sync audio and video.
Second, don't use Custom player, make your own HTML5 Audio element, check the SoundCloud API there is a property stream_url for every streamable track on soundcloud, just put that URL as source on your html5 audio tag.
Keep on mind that this will not work on Firefox and Opera for some time. Firefox will integrate native mp3 support in v20, not sure about opera
Related
So I am using video.js as my video player on my website, but was curious if there was a way (either using video.js or another video player) to be able to sync a video between all devices on the website?
For example, if Person A, Person B and Person C is viewing this video on my website, it would sync their video up so they are at the same time, and if either of them pauses then all three people see their video pause? A lot like Netflix Party / Youtube Party for videos. I am quite new to JS
It's possible to set and read the current time of a video in JavaScript with HTMLMediaElement.currentTime. You can also play/pause and check if its playing with either the paused attribute or the pause/play events.
You will need some form of backend to keep track of when all of this happens and to relay the appropriate time/events to everyone watching which is outside the scope of basic DOM JS (though there are JS based backends if that's your thing).
You'll probably need some form of live two-way connection like a websocket.
So I am using video.js as my video player on my website, but was curious if there was a way (either using video.js or another video player) to be able to sync a video between all devices on the website?
For example, if Person A, Person B and Person C is viewing this video on my website, it would sync their video up so they are at the same time, and if either of them pauses then all three people see their video pause? A lot like Netflix Party / Youtube Party for videos. I am quite new to JS
It's possible to set and read the current time of a video in JavaScript with HTMLMediaElement.currentTime. You can also play/pause and check if its playing with either the paused attribute or the pause/play events.
You will need some form of backend to keep track of when all of this happens and to relay the appropriate time/events to everyone watching which is outside the scope of basic DOM JS (though there are JS based backends if that's your thing).
You'll probably need some form of live two-way connection like a websocket.
Context
I am trying to loop several HTML5 videos one after the other. This is achieved via Javascript with an event listener listening for 'ended' - the video to end. At which point the url to the video is changed and video.play() is executed for the new URL.
For simplicity, lets say there are 2 videos that are to be (auto) played. After the second video finishes playing, it goes back to the first and plays that one (and the cycle continues). The videos will get cached on the user's device after they are first played.
TL-DR: Now what I want to achieve is to code a HTML5 video to be 'mobile friendly', in respect to mobile data plans.
I want the video to either stream when the page loads or buffer only a few seconds from after the point from where the user is watching. So if the user is 5 seconds into the video, the buffer extends to 15 seconds into the video (so 10 seconds of the video is buffered in case the network connection is weak). If the user pauses the video, the video stops buffering. Though the user won't have access to controls; they will be unable to forward, rewind or pause. I only gave the example of the user changing the point of the video to emphasise that I want control over how much the video has buffered and will buffer.
Alternatively, I want the video to stream to the user’s device. And only download that which needs to be immediately played. This is the less desirable option and is probably less desirable than leaving the video tag as it is since if the user has a dodgy connection, the video will play, stop, play, etc.
The reason for me wanting to achieve this is that I have noticed in Edge, IE, Firefox and Chrome that the video auto plays (good, that's what I want it to do) and plays while simultaneously downloading the whole video to their device (terrible). Of course this behaviour is expected, but practically, it should not do this. If users leave the site straight away, why would we want them to download a whole video they won't see?
Sort of but not entirely relevant, it doesn’t help:
HTML5 Video: Force abort of buffering
Simply put, the thread shows only hacks to hide the src and not any actual control over the buffer. I need to control the loading of the buffer in real time, relative to at what point the user is at, and not based on a 'pause' event. I would also like to know if there is a little-known supported method across most browsers (I only really need to worry about this on mobile) to achieve this, as opposed to a 'hack'.
Nevershowmyface: From what I can gather from the code, it stops the buffering every 0.5 seconds. There is no code for resuming the video? As for why this method will not work, it is not buffering relative to at what point the user is at. For all intents and purposes, it is still buffering the video in a linear fashion, without depending on a variable (the point at which the user is at). It's just doing it more slowly or 'in chunks'. If it loads another chunk just before the video runs out of video, I risk the video stopping and waiting to load again if the connection is poor.
Preload:none is useless here since the video is automatically played (notice bold auto at the top). I should have been more explicit. When the page loads, the video automatically plays. Preload loads the video before the play button is clicked on; preload:"none" does not load the video before play is clicked. But since there is no play button and the video plays once the page has loaded, it is a useless attribute.
My hopeless conclusion in regards to what should be a vital and basic feature
(not a rant)
From what I have found, there is no standardised way to achieve this and there are only ‘hacks’, as described in the post, which only serve to provide limited buffering functionality/ control in some browsers, potentially breaking other browsers and potentially having no effect in other browsers. In light of this, I’m on the verge of giving up on this task so thought I’d ask if anyone else has effectively managed to achieve this; it appears to have no support or has not even be considered in HTML5 or Javascript; I might be and hope I'm wrong – would be great to have this in Javascript.
Do other web developers not consider this when they use videos on their sites? I have spoken to other developers about this and they said the data usage from a site is not or is rarely the concern of the developer.
While I understand there are more important things to worry about, it goes without saying this would be very important for mobile users with low data plans.
Analysis:
The HTML5 audio element does not have a stop() function, nor does it
have an option where you can set the amount of data that it is allowed
to buffer, or a way of saying you want the element to stop buffering -
Don't confuse this with the 'preload' function, this only applies to
the element before the play button is clicked.
I have no clue why this is and why this functionality is not
available. If anyone can explain to me why these crucial functions are
not implemented in a standard that should make web development for
mobile phones better and more standardized I would love to know.
And before someone says the conclusion from that post was that this is currently impossible, note:
1) I am dealing with a video file, not an audio file. Slightly different context, where the file being buffered is significantly larger than an .mp3 file.
2) I am not trying to stop buffering altogether. I am trying to restrict it and keep it relative to the point of the video at which the user is at. So you could actually say I am trying to stop it but at an 'x' number of times after the point where the user's video is.
I've looked at many demos and every one of them when recording audio, plays back what you are saying at the same time. The issue with this is when recording without an external mic it causes the laptop's speakers and mic to interfere and spit out loud-ear piercing white noise.
Is there a way to record audio using html5 and javascript without having it playback while you record?
Is there a way to preload entire mp3 in html audio tag.
I'm having this problem for a long time. I have soundcloud player that uses html audio tag, im setting the audio source, the audio starts playing and the buffering starts.
The problem is that, soundcloud audio source is protected with short life token, when audio pre-buffer more data, buffering stops, when audio wants to continue reading the stream, it gets 404 from soundcloud and can't resume buffering.
I've noticed that if i pause the audio, whole track will be loaded at once, but this is not a solution that i need.
According to http://www.w3schools.com/tags/att_audio_preload.asp, you should set preload="auto".
Different browsers behave differently. Chrome buffers whole track on pause (for whatever reason). preload=auto does not do much but fills the buffer from the time url is set rather than on play event.
Flash is different. It loads whole track anyway. But it can not seek to unbuffered position because it can not do byte range requests. And it also wastes your and our bandwidth.