Using subs and audio embedded in video in html video - html

I have a video file with 2 audios, say audio1 and audio2, and subtitles s1 and s2. I want to stream this video through <video> tag in html and let the user change audio stream and subtitle stream as per their suiting. So far I havent found anything that suits my need and all I found was to add subs to the <video> instead of using from the video itself. Can I get some pointers if this is actually possible? And how?

Related

How to update Video.js player after changing video src?

I am fairly new to js and html. I am building my own Video Portfolio Website.
I have multiple videos and update their src, depending on which video is clicked.
I use the video.js player to play my m3u8 and mpd files.
The problem is that, for some reason video.js can't update the src of the video and fails to play any video at all.
[You can download my website here]
I've been trying to solve this problem for a couple weeks now, but couldn't manage to do so.
I hope someone here can help!
Thanks in advance!!
When you're using Video.js (or any comparable player) you shouldn't try to directly interact with the underlying <video> or <source> elements, you need to use Video.js's API.
Loading a new video is accomplished by passing a source or array of sources to the player's src() method.
videojs.getPlayer('my_player').src({
type: 'application/x-mpegurl',
src: 'https://example.com/video.m3u8'
});
See e.g. https://videojs.com/guides/player-workflows/

Video is lagging from Audio in a vLine media session

At first I have a voice call in a vLine session, I hear the audio by getting the audio tag calling createAudioElement() on the media stream and appending it to the $(body)
Then on when the remote user opens his video, I send this piece of info to the other user using an x-msg, after received I get the video stream by calling createVideoElement() on the media stream.
After that I find a lag between the audio and the video, the audio always reaching faster than the video, how can I synchronize the audio with the video in this case?
When you call createVideoElement on the stream it will create a <video> element, which plays both audio and video, so at that point there is no need for the <audio> element that you created with createAudioElement.
The browser handles synchronizing the audio and video in a single MediaStream, so if they are consistently out of sync, you may need to file a WebRTC bug.

Understanding HTML5 Video Tag and streamed Chunks

I am trying to understand the HTML5 video tag and how it plays/buffers chunks of streamed data from a WEBM file.
If I break a WEBM file up into say 10 chunks and feed them all into the video tag, the video plays fine. However if I only feed the last 5 chunks into the video tag it doesn't play.
I get...
INVALID_STATE_ERR: DOM Exception 11
Are there some bytes at the start of the file that are needed?
Does the video tag need to know the specific location it is at in the video to play it? i.e. the content-range
How can I just play a specific chunk(s) of the video?
Thanks
I found out prety much all I needed to know on a google group for Webm.
Heres a link...
https://groups.google.com/a/webmproject.org/forum/?fromgroups=#!topic/webm-discuss/6ySds58ZhEQ

embed video in html: using object tag

I have been trying to make my own customized video player for a website, but i don't really get how you are supposed to do. I've watched video's on youtube how you make your own flash player, but they embed the video in it in flash and there must be another way, like creating the player design, then having a html tag telling the video path and stuff. I've seen other video sites like movpod (i use it to watch stuff like the simpsons :p). They have an object tag in their site with the .swf player (design), but if i go to that file, it only shows up the design of the player, not the actual video. They are then using param tags to define the path to the video in the page. My question is, how do you make the player design, without importing a video in like flash cs5 or something, using said said object tag to the design, and params to define what actual video you want to watch.
The params passed are usually FlashVars. It's basically a Parameter in the object or embed tag defining some variables you can access in Flash, i.e. the adress of the video to play. See http://www.permadi.com/tutorial/flashVars/index.html example 1
In Flash then you read the address to the video and load it, i.e. using a FLVPlayback object.

How to choose a specific video stream from an MKV file with multiple video streams, using HTML5 video tag?

I have a .mkv file with 2 video streams in it.
While playing in browser with HTML5 video tag, how do I select a specific stream ?
I have tried
video src="1234.mkv#Strem 0"
but it does not work
I hope this will help:
HTML 5 Video Player with multiple video streams
HTML5 video tag, as yet, does not support playing multiple streams within a single file.
Having said that, there seems to be some work going on to support such a feature.
More information at following links
(x) http://blog.gingertech.net/2011/05/01/html5-multi-track-audio-or-video/
(x) http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#media-resources-with-multiple-media-tracks