HTML5 video streaming issue - html

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.

Related

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.

uploaded video only audio is displayed

I am trying to upload an MP4 file. But with this specefic file only the sound content is displayed.
With all my other videos there is no problem only with this specefic one.
i found the following SO question:
HTML5 video of type video/mp4 playing audio only
Where he suggest to find a converter.
Does anyone know if this could be the problem and how do i secure that regardless of what video my user uploads that it will always be able to play?
Yes, this can be a problem.
You have not written about your server limitations, so if you have the possibility to execute converters (like ffmpeg) then this is the best solution. This way you can also guarantee fixed resolution, framerate and various other properties, and your server won't eat up all the space if someone uploads a 2GB video... (Users can be dumb sometimes.)
If you cannot run ffmpeg on the server then try reading some about how can you detect codecs on your server, in the language you use, etc. Then, if you still want to, post a specific question.
Also try opening your videoplayer page with different browsers (Chrome, FF, IE at least). They might not support the codecs the same way.

Node-Webkit: How to play AVI videos?

I am trying to make a simple node-webkit app that lets you play .avi videos (which should work both on windows and mac). Is there a way to do this with node-webkit?
It is unlikely you will be able to just do this with Node-Webkit. Especially since the official webkit does not support AVI. Your best bet is to use an external application like libav (avplay) or use node to serve a webpage that has a player capable of playing the content and just let the users browser do the work. (Flash is likely still the best way to go, video.js is a good choice)
The alternative is to convert the video to one of the supported formats. I would recommend mp4. (Once again libav (avconv) comes in handy here.) This still assumes that Node-Webkit has implemented full HTML5 support. (I am not sure what they have completed but I am guessing it supports the video element)
Is AVI supported in Chrome (not Chromium) ?
If it is you have to change the libffmpegsumo.so in nw for the one in Chrome (try to use the same version).
libffmpegsumo.so is called ffmpegsumo.dll in Windows
The file file is in the same folder of the nw executable
to get the file download google chrome and go to %USER%/Google Chrome/ (or something like that) and you'll find the file in the same folder of the google-chrome executable
You can wcjs-player to play any format video which supported by VLC. It plays any video without any lags as in-built player.
To support my above claim, I have following points:
Building NW (by compiling source code) with various FFMPEG codec flags given at nw github site, doesn't help, in getting ffmpegsumo.dll which can play avi file format.
wcjs-player uses VLC libraries, which support all video played by VLC does.
Its better than using any nw plugin, as internally wcjs-player using VLC does similar job as HTML native video support .
Even if you suceed playing avi files, sometimes supported videos file format may not get played like most ironically mp4 file itself.
Apart from this, Teewe Theatre, Popcorn Time , Butter are among NW based media player using wcjs-player. It hardly increased 30 MB size of overall app size.

Flash and "206 partial conent" http status code

I use JWPlayer to play videos from the server. Videos are encoded using h.264 codec. If i open them in browser with h.264 support - video plays nicely and i can seek it, because server returns 206 header browser understands that its partial content. But if i try to play same video on Opera, for example, flash player is being used and it receives 200 OK! 2 problems here:
I can't seek the video, until part of it is downloaded
If the video is not "properly" encoded player can't even start playing it, until file is fully downloaded.
Is there something wrong with flash properly asking/understanding http headers?(i've never worked with flash before, so maybe my question is a bit silly and i just don't know flash's limitations)..
1) You need to have pseudo streaming enabled, for Flash - http://www.longtailvideo.com/support/jw-player/28855/pseudo-streaming-in-flash, if you can provide a link though, I will take a look at exactly what is going on here, I am more or less guessing about this one. HTML5 does not require a pseudo streaming module to be installed on the server side, though. In Flash, the default is progressive download, so you can only seek to downloaded parts, and in html5, this is not the case.
2) Yes, that is because of encoding. If your MP4 files cannot be seeked before they are completely downloaded, you will have to fix the MOOV atom (it contains the seeking information) located at the end of your video. Use this little application to parse your videos and add the necessary cue points - http://renaun.com/blog/2010/06/qtindexswapper-2/
Also, encoding via HandBrake - http://handbrake.fr/, can fix this as well, so the above tool wouldn't be necessary. You can encode using HandBrake, and enable "web optimized", which does the same this as the Index Swapper Tool. HandBrake also has command line encoding options as well.

encoding video for html5 playback

I am creating a video portfolio website with a large quantity of videos and I am wondering as to the best way to go about encoding the videos for web playback. I am using the html5 video for everybody methodology, so I need the video encoded in the following 3 formats:
h.264
Ogg
WebM
I don't necissarily NEED WebM, but it would be nice.
Up until now I've been using a combination of Handbrake and ffmpeg2theora, but I am looking for some sort of all in one solution, as Handbrake seems to have trouble with large sized videos, and ffmpeg2theora is just a pain in the ass. Does anyone have any suggestions?
Thanks!
Miro Video Converter works really well for all those formats.
It's essentially a wrapper UI for ffmpeg and has limited options but does a good job.
You can also display the ffmpeg command log and tweak the command if the default output doesn't satisfy you.
It's also free.
You might want to take a look at VLC's conversion functionality. It can export in a number of different formats using export plug-ins, and has a handy encoding queue as well. As of right now I know it can do H.264 as well as Theora ... I'm not sure about WebM ... my version doesn't, but there may be an encoding plug-in coming that will do that as well.
Best of all, VLC is free.
Hope this helps,
Jason
FYI I tried Miro, and ran into some odd conversion issues. My .ogg files were fine, but my .webm files were a bit wonky. They'd play/run fine locally, but I'd get an error with the file when I uploaded it to my server (it would play once, and then hang every time thereafter).
I had some luck with Firefogg, which I ended up using without problems.
However, both Miro and Firefogg are more of a one file, click, convert approach. If you're wanting to do a large batch, here's a guide that a friend sent to me, from Brett Terpstra: Automating HTML5 Video Encodes. It's way over my head... but perhaps of some use to you.