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.
Related
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.
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.
I'm creating a site that streams video's and I want to allow the user to upload video's themselves. AVI or MP4. I've done some research about it. If I would want to make it cross browser compatible I would have to use all three of these formats:
.mp4, .ogv, and .web
Luckily I only need to get this to work in chrome. However, it turns out chrome doesnt support .mp4 well. I suppose the best option is to convert them, but I'm not sure. What would be a good solution for this?
This is what I use to play videos on a site I did.:
Cross Browser Player
I built all of the uplaod ability with php and use this player to allow user to play the videos.
I'm creating a Content Management System that allows the content manager to upload videos to the server. There will be a list of pages and each one will have a video on it. Each video should then be able to be played by the content observer.
Problem: I can get some videos to play, but I cannot get all of them to play and I don't know why. How do I force the content manager to upload only videos that work or convert videos that do not work? I've used embed, object, iframes, and videos tags, but I can't to get any of them to work all the time. This link is what I have tried. http://ww.w3schools.com/html/html_videos.asp
Alternative Solution: Just make the content manager upload videos to youtube, then put the embed code in the database and call for it when you need it. This works but the code does not validate when you do this which is bad for SEO. Also, if the content manager does not do it correctly he could be advertising for the competition because the video can show links to other videos when it is done.
It is hard. In our CMS you need verify the content, probably in a async procedure, and reject the video if there is something wrong. The most important is choose a good set of formats and codecs (and other characteristics like Frames Per Second, Audio Bitrate, etc) and make this "contract" something very explicit. ffmpeg with -i option can identify the video, extension, codec, length, aspect-ratio, etc.
You also try to convert from any format to one good format like mp4 h264 with 360p.
I want so serve some videos on my site. They are available as .MP4 files gotten from a FlipShare camera.
Now I tried converting them to WMV (which succeeded, but when embedded in html in a <object id='mediaPlayer' width='320' height='285' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' etc' tag, users have to install an addon and the user experience of 10 Windows Media Players on the site isn't just so good.)
So then I looked at youtube and wondered how they do it, but I can't figure out what format they convert the video to.
So my question is: What format do I have to convert my video to, to show it in a player which does not need to be installed in the users browser. What tool do i need and what is the html code to embed such a video?
As you can see: starting from scratch.
PS: I often hear: This or that file extension is just a container, there can be anything inside. If you're using this in your answer, can you explain this to me, because I never understood this. For me a .cs is a c# file and a .doc a Word file, and not 'a container'.
This isn't an easy question. The basic answer is that you need to use a format that the user's computer already supports. There is no one answer to this question. YouTube encodes videos as MP4 and embeds them in the page with a Flash-based movie player, and Flash is pretty widely supported, but you'll notice that Flash isn't available on a lot of mobile platforms — so anybody using an iPhone is shut out if you go the Flash route.
HTML5 introduces the video tag, which is meant to solve this problem once and for all, but there's still a hiccup even there — most HTML5-enabled browsers support h.264-encoded video, but Mozilla supports Ogg Theora instead. YouTube is currently experimenting with a <video>-based player, so this does seem like the future.
I believe the current best practice to support the most people possible is to encode as h.264, try to serve as a <video> element, and have a Flash-based player as a fallback if that doesn't work (which can play the same h.264 file).
I'd say the most popular solution at the moment - utilized by YouTube and other major video portals - is H.264 encoded Flash-based Video. Flash can play Video since... I think Version 8 or 9, and has since gained significant market share.
My personal favourite Flash player is LongTail Player, but it isn't free for commercial use.
Here's a SO question with a list of Flash based players including open source ones.
Flash won't play on iPhone and iPad, though.
If you want to support computers with Flash Player 9 (I've seen some around, but I don't have any hard numbers) you will need to encode FLV files (which use a codec named Sorenson I think).
The upcoming alternative is HTML 5 Video but suport for that in browsers is nowhere near a major market share.
This question requires a re-answer now that it's no longer 2010 and HTML5 videos (as utilized by most video hosting sites) and chunk-based videos (sent as responses to periodic XHR requests - as utilized by Youtube) are the norm. While there is no best way to add video to your site, Flash is definitely nowhere close to even being good as of the time of writing of this answer.
The simple un-researched answer is: Just use a video tag and it'll work out!
This is simple and intuitive, and should work fine in many of your use-cases.
The researched answer is: Unfortunately, upload the video on Youtube and embed it on your site.
The pros and cons of embedding on Youtube over just having a video tag:
The pros:
Allows you to offer your video in a multitude of qualities.
Very bandwidth efficient. Youtube is bandwidth efficient for your users since it reencodes videos, and is also bandwidth efficient for you since you'll no longer be serving your videos off your own hosting.
Offers features like closed captions, automatic subs, playing at multiple speeds, full screen player, etc.
The cons:
It's a very heavily monetized service, chances are they'll want to put ads on your video if any of its content isn't 100% originally yours.
It has very strict laws/terms and conditions that you need to adhere to, at least in my opinion.
It tracks your users. If your application requires privacy and you can't rely on your users to protect themselves, then Youtube isn't ideal.
Other alternatives that mix the pros and cons of those two options are:
Using a Javascript video library to get HTML5 video along with some of the pros of using youtube, but none of its cons.
Using FFMPEG on the server side, for bandwidth issues.
Using some CDN that supports video to deliver the video, for reliability and bandwidth issues. My current favorites are ones that rely on service workers and the bittorent protocol, to stream from users to each other, but whether that suits you or not depends on your application.
Using AWS storage services to store the video, and AWS gateway/CDN services to serve it, which might be a great solution cost-wise and efficiency-wise if you don't want youtube but don't want to store videos on whatever infrastructure is serving your website.
Sources of this answer: Personal experience. As much as I didn't want to answer from experience, this question really needed a new answer! Feel free to edit it with something more concrete.
Converting your video MPEG-4 with H.264 will get you 97% coverage on current browsers across desktop and mobile, although some Android devices don't support hardware acceleration for this format. To address that you could also serve WebM with VP9 codec.
I wrote up a summary of browser support that might be useful: https://stuartk.com/posts/whats-the-best-html-video-format-to-serve/