uploaded video only audio is displayed - html

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.

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.

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.

Html5 MP4 file size unknown streaming. Best approach?

Is it possible to create mp4 file/container with out the size.
I am using media foundation to convert some file into h264/acc and wrap it around mp4.
What happen is that as file finishes up the encoder adds the size of the file.
I need to start streaming as soon as the encoder starts encoding the data.
And client is going to do a progressive download.
Is this feasible. Of course I am using html5 So rtp/rtsp is out the question.
Or is Ogg/Theora a better way to do this ? Do we need to know the file size or can we just stream it ?
I know each browser has different decoders.
Would it be possible to lie about the size in the mp4's headers?
The issue here is that you will not be able to get a playable mp4 without the atom being completely written. [Exact size and location of all the chunks]. So the answer to your first question is no. You cannot do it with mp4. A transport stream is the best way to do it. I have not tried Ogg/theora so don't know about that but a ts can be streamed right away.
If you need a solution that works across all browsers it is a bit of a pain.
I don't think I understand what you are doing but I stream mp4 and it works fine in modern browsers. Only IE9 struggles with it and won't play as you would expect. Ogg files work fine, too.
I've found that mp4 encoded with any converter works fine in any modern browser, too, but I needed to use handbrake to get them to work in IE9. Still haven't figured out why and no one at Microsoft knows either cause I've asked this question just about everywhere without response.

How do I embed wmv/mpg/avi/mov/etc videos reliably?

I am trying to embed video files (wmv, mpg, avi, mov, etc.) dynamically by creating embed elements in javascript. The problem I am running in to is this has not been very reliable across all browsers and even if it does work, there is no guarantee that the end user has the required plugin to play the video. Ideally, I would convert everything to flv or an HTML5 video format but this is not currently possible due to cpu/disk space restrictions (these are videos uploaded by the end user, not me). I feel like this shouldn't be as difficult as it has presented itself to be - does anyone have any suggestions?
To the day VLC release a browser plug-in, the best way is to convert them to .FLV or .MP4 files server side. And use a free Flash video player for the playback (I mean HTML5 with Flash fallback).
If you do not want to convert those videos, let the end user directly download the files. And deal with the problem of multiple video format himself.
edit:
Or you could move your website out of the HTML browser, and build a desktop software, that can take charge of all those videos format, client side.
edit2:
Use Youtube API or any other already existing video hosting services. Personally I will avoid this solution.
The only way to do it reliably is with flash. Use ffmpeg to convert incoming videos to .FLV and use a flash player.

HTML5 live video "hack"

For the last two month I have been trying to "fool" safari into thinking that it's looking at a file on the server, which in fact is a live video stream from a camera encoded and muxed upon request using Gstreamer into a format that is supported by the browser. Since HTML5 supports progressive video downloads this should at least be possible in theory.
My conclusion is that this gets quite complicated considering that browsers make a partial content request when downloading video files in HTML5, mainly for the sake of seeking. If the server lacks support for this feature the video is not played until the file is completely downloaded.
Have anyone else tried this approach with more success? Or should I just give up and wait for true live video support like RTSP to be integrated into browsers.
Cheers.
This article provides some useful tips: https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media
Are you serving the X-content-duration header?
You have two possibilies.
With H.264 you can emulate a file with fragmented structure: ISO container (.mp4) with movie fragment atoms (MOOF's).
The other option is Google's WebM. Clients can "join in" the stream any time thanks to MKV file's structure. For best results the first frame transmitted to the client should be akeyframe.
If you only need video but not audio, "Motion JPEG" can do it. It's not HTML5 but a Netscape-era feature.
http://en.wikipedia.org/wiki/Motion_JPEG#M-JPEG_over_HTTP