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/
Related
I notice (by looking at the Chromium network tab) an annoying phenomenon of many Web sites that include videos implementing video playing by sending many small video chunks, with the user (behind the Web browser) not aware of this and even being capable of seeking through the video and seeing the current "position" in the video's reproduction relative to the start and end.
What is the professional term/jargon used for this?
Some existing questions that talk about or mention such Web videos:
Play multi part video without interrupts (HTML5)
Chunk audio/video files for web
Are html5 streamed videos cacheable?
videojs: Download/stream video in chunks with quality selecton
How does video on demand work in Youtube?
The term your probably looking for is “Adaptive Streaming” or “Adaptive Bitrate Streaming”. Or maybe you are looking for names of implementations like “DASH” or “HTTP Live Streaming”
Also, it’s not an “annoying phenomenon” it’s a technique that allows for live streaming media with an undetermined length that can adjust to each users internet connection without using expensive media servers and can leverage existing CDNs and caching infrastructure.
In short, I want to record presentation audio, create time markers for that audio in a database, and then provide marker-navigation of that audio content from a web page. What technology (e.g. HTML5 Audio, RTMP) can support this?
My requirements in more detail:
quickly navigate to server-side marked points in server-stored audio, from the browser.
avoid any proprietary client-side software, such as Silverlight; although due to penetration Flash is acceptable, and future-looking standards like HTML5 media are acceptable, provided it ships with the latest browsers.
prefer to leave the 30-50 minute audio files un-split rather than pre-splitting on the selected markers; so that the markers can be seamlessly changed later.
like to keep licensing cost minimal; although single-purchase licensed server-side technologies are fine.
prefer to do most of this from IIS, where I have most experience. however, a parallel streaming server such as Adobe with Windows APIs is acceptable.
Here are my best guesses on a solution so-far:
the presentations will be compressed and stored in mp3 files (but really, any advice on an easily seekable format for speech recording is welcome).
the client will play a unicast stream rather than download file chunks (although TBR, below, challenges this assumption)
HTML5 is not ready, so flash will be required at the client
IIS Media Services is no-go as it requires Silverlight for seekable audio
The leading products in this space, such as Adobe Media Server 5, are probably large kits with their focus on video media. I can probably find a more focused tool like Icecast to reliably do what I need.
OK, I'll bite. I went and looked for how people actually address this, and it's how I said it is in my comment.
Setting HTML5 audio position (it's so close it almost makes this question a dupe)
I've also found this nice blog post from 2009 that describes the further technical possibilities and options. The latter part revolves around advanced video use cases and Ogg, but the first part should apply just fine to <audio>.
http://gingertech.net/2009/08/19/jumping-to-time-offsets-in-videos/
After several years working with commercial and custom Flash video players, such as Flowplayer and jwplayer, I decided to open my work to html5. I like the idea of having a Flash impersonation of html5, so I tried medialements.js, video.js and jplayer. None of them are production ready and they all fail to meet my goal, which is playing a video on a webpage, desktop and mobile, live and vod.
Does anyone has a suggestion for a working web video player, apart from the commercial ones?
TIA
greg
I can get to what you are saying. Videojs is a leader in HTML5 video and considered state of the art by many though I think it falls short on some aspects especially for iOS/Android and Live streaming. Here is a list that compares some common actors of the market.
After much time playing with the different players available I decided to build my own HTML5 video jQuery based player. I learned so much while doing so and if you are planning on re-using it for your projects it will be much faster to tweak your own player rather than trying to build something up on a player someone else built. Now doing so requires you like JavaScript and are happy to deal with the cross browser testing. This article can give you a place to start. Digging in further would require you take on board the W3C spec.
Live streaming in HTML5 video is limited today: HLS for iOS and Android > 4.1 and coming in fast MPEG DASH (it has a JS lib for live and on demand here). If you want to cover a large audience for live video streaming you still need to consider flash.
I want to use an HTML5 video player and stream videos. Is this possible with S3/CloudFront? I understand Amazon uses the RTMP streaming protocol and HTML5's video tag does not support RTMP. Is there any way to stream videos with HTML5 players?
Much of what #Wayne Koorts posted provides the basis for a good answer. The disconnect it seems is that you can "stream" video via progressive download. This works with any html5 compatible video file, as he illustrated.
In order to get the best performance in a progressive download of mp4 files, you need the moov atom meta data to appear at the beginning of the file. Insuring that your mp4 files have this property is one of the reasons that the qtfaststart program is included with ffmpeg.
Of course, progressive download is not a "streaming media server". Streaming media servers were designed to support a number of different features including:
Security and DRM
Adaptive streaming/interleaving (support for multiple bit rates interleaved into a specific file)
Seeking
It seems the particular concern expressed here is the seeking feature. As it happens this is supported fine in html5 and by s3/cloudfront.
What is confusing is that cloudfront of video files has several options. One option is to have the files delivered by their network of licensed Adobe FMS servers. This is where the confusion about the use of RTMP comes into play. However, that is only an option. Files can be distributed to cloudfront in standard "download" form and they will have the seeking property due to the implementation of byte ranges and support for what is popularly known as pseudo streaming.
There seems to be a lot of confusion about the term "Pseudo streaming" but in the case of html5, it's simply the requirement that the HTTP server supports the 1.1 specification. When seeking, the client sends a byte range request and the server is responsible for delivering that portion of the file.
In other words... seeking with the html5 player does work with the cloudfront servers because they are HTTP 1.1 compatible.
As for some of the other functions that streaming servers provide, there are a variety of competitive servers that have implemented "H264 streaming" or elements of MPEG-DASH as an alternative to the use of RTMP and FMS compatible servers. A number of flash based players support these functions, which go above and beyond simple seeking. The JWPlayer and Flowplayer are 2 examples of players that support some or all of the features, however HTML5's video player has no support for any of these features. You can learn more looking at http://h264.code-shop.com/trac#H264StreamingModuleIntroductionversion2
If that's not enough confusion for you, Apple implemented their own "HTTP Live Streaming" protocol, sometimes known as m3u8, which they support in ios and quicktime. I mention this because frequently people want a way to support a variety of different devices.
I hope this helped clarify things a bit.
Something I have done successfully recently is to use the Video.js HTML5 player (open source) video player, with videos hosted on S3. Basically you just upload your video into your S3 bucket, then the code on the page looks something like this (after including the Video.js CSS and JS files into your page):
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="1600" height="900"
poster="http://mys3bucket.s3.amazonaws.com/videoImage.jpg"
data-setup='{"example_option":true}'>
<source src="http://mys3bucket.s3.amazonaws.com/myvideofile.mp4" type='video/mp4' />
<source src="http://mys3bucket.s3.amazonaws.com/myvideofile.webm" type='video/webm' />
</video>
poster is just the still image to display on the video player while the video is loading or not playing. As for the <source> tags, you can link as many or as few of these as you have videos for. More formats just means better support across different platforms (e.g. some vanilla Linux distributions may not play MP4 etc.).
See the Video.js quick start guide here.
When deciding whether to use S3 or CloudFront: IMHO S3 is more appropriate for video in general because the cost is cheaper when you're storing a lot of data (because CloudFront distributes copies of everything to all of its edge servers, although you can limit that somewhat via options). Some people do prefer CloudFront though due to the speed, although remember CloudFront is intended primarily as a content delivery network where super fast response times are required (e.g. for site graphics, stylesheets, JS files etc.), so it's a trade-off depending on your needs. If your videos are all very small then you may find CloudFront actually is appropriate for your needs.
For analysing costs more definitively you can use Amazon's monthly cost calculator.
I am working on some video stuff for a global production. I need to keep cost down but I am looking to be easily scalable and enough features to deliver a pretty complex system securely. AWS seems great, been using them for a few years now and I think the S3 Buckets are amazing. They are free, to a limit. And yes. They certainly do succeed in providing what I believe is streaming video; in that it is housed in S3 and it plays right into my JWPlayer immediately on page load with no jitters or latency.
I can see some of the streaming video delineations are vague and still confusing for me, although #gview did a great job providing us with deeper incite. The complexity of it interest me, but if your agenda is to get that video going, I do not believe HTML5 is your answer. SOAP, REST, HTTP, and even HTTPS are supported and provision-able as far as I know. The documentation at AWS is noteworthy also, very helpful. I will attach a start link here.
# user2352370 : JWplayer..I am undecided. I just purchased the middle tier membership and now upon reading Wayne Koorts above, I think JSvideo is better for a variety of reasons and I will be working with that if I can get a refund. I am not seeing any immediate value in JWvideo, past the styling it provides for the videos. I believe the JWvideo's value to me at least, is limited to the styling of the video. I can use JSVideo to create a variety of fall-backs easily for multiple device and browser types. I can style the JSVideo even, but maybe something is to be said for the simplicity of JWvideo. I am probably going to need it for the onslaught of video post I will have in the months ahead.
Both JWVideo & JSVideo Will Work
I think JWVideo and JSvideo both will do the job, I currently have both on my site for various videos and both do a decent job, have not tested browsers very deep yet though.
Do create a Free AWS account and play with the services for free. Its pretty eye opening if you have been dealing with providers like RackSpace or Host Gator for a while.
AWS Free Tier HomePage
AWS Documentation Site for S3
Was looking at AS3 for hosting videos with VideoJS for my own site and that's why I found your question but when I looked at the example code for VideoJS I noticed that the link was at a company called ZenCoder - http://video-js.zencoder.com/oceans-clip.mp4
http://zencoder.com/en/
I have no association with Zencoder but presumably worth considering if you're looking for cloud based video hosting.
sorry for the convoluted and subjective question, but multimedia is totally out of my area of expertize.
I know there are several alternatives to embed video on a page. There is HTML 5 <video> tag, there is video/ogg content type which seems nobody uses, there is Flash SWF embedding or Flash FLV progressive, I think Silverlight has something and finally there is external hosting.
My needs are for a commercial site video tour, it has to be fairly good quality. Good hosting is around USD $100/mo (I looked at viddler.com, the ones 37signals use), over my budget. Is there a good, commercial, hosting at under USD $20/mo ?
So I'm considering the alternatives. I believe my best bet is on SWF, is a tested technology, supported by plenty of platforms. Besides I'll need to use their charting components anyway later down the road. What tool do I need? Standard Flex Builder, Professional Flex Builder or I can use the free Flex SDK?
What other alternatives are there?
There are already many Flash applets that will play video in any browser that has the Flash plugin (as new as possible, hopefully). For example, Flowplayer is pretty much ready to use out of the box. All you have to do is embed it on your website and point it towards whatever video file you want to show.
I assume you're not hosting the next YouTube, in which case a quality webhost with generous or unlimited bandwidth caps would be enough. (I have used Site5 for $5/month before and haven't been banned, at least :p).
As for quality, generic FLV uses an older codec that's not so great. Newest flash player can use the excellent H.264 codec (what YouTube uses for HQ and HD video) in MP4 container (take a look at this tutorial). Of course, the higher the bit rate, the better the quality, but the slower the video loads.
For playing videos that you control Flash is probably your best bet. The JW player is pretty good and fairly cheap to purchase for commercial sites. It's very easy to setup too.
You just need to make sure that you're serving files that Flash can play.
JW Player info: http://www.longtailvideo.com/support/jw-player-setup-wizard
Flash codec info: http://en.wikipedia.org/wiki/Flash_Video
Good luck!
You could make a youtube account, upload your videos there and then embed them on your site. It is free to use, widely supported, and you can reach a bigger audience that way.