I want to make a web page where I display a video with options of multiple audio tracks where user can switch between different tracks available and just the audio will switch or maybe if possible video goes back 10 seconds and continues with selected audio track (eg. VLC player where we can select between different tracks).
How should i go about it? I read about VideoJs but couldn't understand how to do it.
It is not possible to add audio tracks through HTML like you can with text tracks. They must be added programmatically.
Video.js only stores track representations. Switching audio tracks for playback is not handled by Video.js and must be handled elsewhere - for example, videojs-contrib-hls handles switching audio tracks to support track selection through the UI.
Reference: https://docs.videojs.com/tutorial-audio-tracks.html
Related
I'm wondering if it's possible to switch between video tracks on a given < video > element
<video id='vid'></video>
I was able to add multiple video tracks to the stream using:
vid.captureStream().addTrack(added track)
Essentially I was able to add multiple video tracks. But as soon as
the element contains more than one video track, no video will play.
If I remove the extra tracks, the video will play the added tracks.
I tried fooling around with the track.enabled property but it doesn't seem to do anything.
The idea is I want to load a bunch of tracks initially and switch between them. Possible?
It is essential that no video tracks are added and removed, only initially loading them.
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.
I have created something like MPD pad in javascript. And now I want to record sequences. I have tried to record all the keyups and keydowns, then duplicate existing layer of audio elements and then play them in the background according to recorded inputs. But is there any sound recording API to record output sound of browser so I could have a the sequence recorded into audio file?
It depends on how it's implemented. See http://www.html5rocks.com/en/tutorials/getusermedia/intro/
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