HTML5 video - multiple video files - html

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..

Related

HTML5 video streaming issue

I know this kind of problem was already mentioned, but, I have to play some videos who are encoded in MP4 (h264 / AAC). Some of them are 2 hours long, sometimes more.
The problem is that they don't start quickly, because I need to download a random amount of data to be able to play the video : the browser doesn't load the entire file, but 5/6MB, which is a problem for the lowest connexions.
I tried the FFMpeg option -movflags +faststart but it changes nothing.
I tried the qt-faststart tool, it says "last atom in file was not a moov atom".
The server seems to be configurated to allow partial requests (Accept-Ranges:bytes in Response Headers).
Did I tried everything? Is there something more I can do?
Thanks !
Romain
You need to look into adaptive streaming. Either HLS or DASH format would solve your problem. It does entail to review your media delivery architecture and your video player.
Example here: https://www.keycdn.com/support/how-to-convert-mp4-to-hls/
Players like JW Player can read both format on most platforms.

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

How to stream mkv file using html/javascript?

Is there any way to stream mkv files on webpage using javascript/html or any other technologies? I found many questions about this, but I really want to know the answer - is this possible in any way? Maybe ajax, javascript, php, html? Maybe some external libraries? Anything?
I was wondering how youtube works. Is there possible to upload mkv file? Is so, how that videos are streaming to end user?
I know that browser doesn't support mkv natively, but maybe is some way to forcing html to do that?
Any help will be appreciated.
YouTube most probably works using the DASH protocol format. On the server side, the source audio and source video are separately divided into segments of different bitrate/quality. A manifest keeps an index of all possible segments values and their location. This allows to switch quality during playback in the player.
On the client side, the DASH (should be the same with the other main technology: HLS) manifest is used by the player to locate the segments to load in order to feed the content in two separate SourceBuffer, one for audio and one for video and both are being played synchronously together in the MediaSource. For an example player that handles this, see the Shaka Player developed by Google.
Conclusion, there is no need to use a container like mkv but each channel (video, audio) needs to point to a browser supported codec encoded segments.
You don't need anything special for streaming pre-recorded media files. A normal HTTP/1.1 or HTTP/2 server will work just fine. The browser is generally capable of seeking into the file using range requests.
Matroska (MKV) is a container format, and it actually is widely supported because it's basically the same as WebM. WebM is a subset of Matroska... the key differences being that there are suggested codecs for use. (Matroska itself supports almost anything.)
Your audio and video tracks in the file can use a variety of codecs... the key is to use codecs compatible with browsers. Opus for audio and VP8 for video will take you far.
From there, simply reference your video file in a <video> tag.

Make separate videos appear to be one video with VideoJS

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

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.