Switching between video tracks on a video element - javascript

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.

Related

Video with multiple audio tracks

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

What variable/attribute changes when you hit play on an HTML5 video controller?

I'm using HTML5 video tags in my webpage. I have a small "Watch Video" button that opens a modal displaying this video. Everything works as intended. I am, however, trying to determine what changes in the HTML document (or possibly the DOM?) when I hit the controller's play button.
The goal in determining this is to have the video begin playing automatically once the modal is revealed which I plan to do with a small JS script. Also, when I close the modal window, I will have it disappear.
I did a few Google searches and started to see people discussing creating custom controllers for these videos which I feel is unnecessary - I want to utilize/modify what is already in existence.
To summarize: What is happening when I hit the play/pause controllers in an HTML5 video?
The W3C has a handy <video> interface that shows how the properties and events on a video element change and fire as you interact with it.
As you can see from that demo, the major things that occur when you play a video are:
the video's paused attribute is set to false
the video emits a play event
If the video has preload value of "none" (as this one does), then the video will begin loading when the user presses play, which triggers a few other events, e.g, the canplaythrough event will eventually fire, the buffered attribute will continue to change as the video loads, etc.

Synchronising SoundCloud audio and Vimeo/Youtube video playing together

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

how can I know if a youtube video is playing ? (is it possible in iframe?)

I have an automatic slideshow with images and youtube videos. If a user clicks play on a video, as the slideshow continues running the next slide is shown hence hiding the video.
Is it possible to know if the video is running, as to stop the slideshow from hiding the video?
Thanks...
Depending on how much ease you want, you could use Popcorn.js (https://github.com/mozilla/popcorn-js). This will let you load web media and then do things on page (whatever you want, change the page, play or pause a slideshow, trigger some JS, etc) based on what happens in the video, as well as letting you query the video's state by using the popcorn API

MediaElement IE9 video lingers when switching sources

I am using mediaelement.js and am loading different content into the same player using something like
player.pause()
player.setSrc(newSource)
player.load()
player.play()
when a user clicks a button.
In IE9, I am experiencing the old video being shown for a full second or so before the new video starts being played. I understand the video has to load but in other browsers the player shows an interstitial loading overlay until the video is ready to be played.
Additionally I've tried to manually manipulate the overlays but cannot figure out (for the life of me) what event to hook into that truly marks the ability for the player to play the new video (when to lift the overlay).
I have tried hooking into "loadeddata", "canplay" events before calling player.play() and still experience the old video for a second or so.
I also want to avoid solutions that reinitialize the player.
Any help would be greatly appreciated! Thanks

Categories

Resources