Make separate videos appear to be one video with VideoJS - html

I have a few videos which are each about 5 minutes in length. Is there any way to use VideoJS such that these five videos appear to be all one video, each concatenated one after the other? The video length should appear to be the total length of all my videos. If I seek to a spot it should go to the corresponding video and play at the corresponding place. If VideoJS does not support this I would be happy to choose a different player.

I think it's better to concatenate those two videos into one before trying to stream them.
You can try to use ffmpeg to concatenate them. See: Concatenate two mp4 files using ffmpeg, then you can stream the o/p video file by videoJS

Related

Chromecast not playing multiple HTML5 videos

I have 2 video players on single page. On desktop, everything works fine, both video players are playing videos. But when I try to cast this page to Chromecast (via Google Chrome extension or via https://demille.github.io/url-cast-receiver/), only first video player is active and playing, second video player is not working.
I tried to debug it and it looks like second video ends at video readyState=1 (first video has readyState=4)
Is there way to fix this? (I need multiple video players on single page, so using only one player and switching video files URLs is not a solution)
URL: http://iuvomedia.eu/chromecast/
If you want one video to play and other to be pre-loaded then you should make a queue of videos you want to play. Chromecast will play single video at a time and when it ends it'll automatically load the next one in the queue.
For information on autoplay and queuing you may visit https://developers.google.com/cast/docs/autoplay
You cannot have more than one active media element.
I mean, you can have two media elements where one plays a video that doesn't have any audio and the second one plays only audio.
You cannot have two active video or two active audio pipelines at the same time.
check here: Create multiple instances of html video object

What should the file size be for website videos?

I'm working on a webiste for a client that, when finished, will have about 20 videos in the gallery section. I've already converted the videos tp mp4, ogg, and webm video types but I was wondering what is a reasonable file size for these different formats. I checked out this question "What is a reasonable file size for a 4 minute video on the web?" but I'm still not satisfied.
To convert I had .mov files. I opened them up in Windows Movie Maker, cut, mute, and took a snapshot of them. I then saved them all as .mp4s. Then I used Miro Video Converter to convert them all again to .mp4 which brought down the size a bit. I then converted the new mp4s to .ogg and webm.
Now, I ended up with final cuts like this:
mp4 files range from about 3MB to 30MB
ogg files are a little more sporadic. most of them range 10MB-30MB but then i have several that are around 70MB for some reason
webm files give me some concern. they came out to be about 2MB-10MB with some great quality. I almost feel like it's too good to be true...
Should I be worried about these file sizes? I did some calclations based on my internet speed which is 40Mbps. at that rate it should take about 11.6s to load a 70MB videos which is my largest video. Is this too long? I kinda feel like it is. Will the user be able to start playing the video before it loads. I'm going to be using HTML5 video tag with flash fallback by the way.
Oh, I forgot to mention. None of these videos are longer than 45 seconds. That's another thing. are the file sizes too big for how long the videos are?
To me the sizes you have mentioned seem ok, but you do have a lot of videos on the one page. You could inform the browser that you don't want the videos to be downloaded unless the user actually chooses to play them by using setting the preload attribute to "none" on the video tag.
If the videos are in a certain order, e.g. the most popular are at the beginning, then you could set preload="meta" on those ones, which tells that browser that you would like them to download the metadata only, so they might start to play quicker.

HTML5 video - multiple video files

Is it possible to playing multiple video files (pieces of single video) in the same player with common timeline? This must look like single video. It is posible?
I can't glue fragments in the signle video because of disk space problem. I'd like stream multiple files sequentially by request of user.
The requirement of HTML5 is from iPad/Android 4.1+ compatibility
It's a little hard. Can two Video traces be played with same common timeline. Camtasia Recorder 8 could transcribe videos you could have a try. Macgo Mac Blu-ray Player cannot support this function now. I used it for several years. But it could open 2 videos with two different windows. If you tried and success, please let me know. Haha..

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

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