I'm putting together a site that will include some instructional videos that will be 1 to 3 minutes long. The users will be accessing these through standard and mobile browsers. I'm particularly concerned with users of i-devices, such as iPhone/iPod Touch/iPad.
To deliver the videos, I'm will probably use videojs.com player - it seems like a pretty robust choice. Unfortunately, I don't know first thing about what file formats and standards to use for encoding files. H.264 Baseline profile seems to be a good choice, but I really need some direction on where to read up on what might be the best choice.
Please help :)
The best resource I've found for this information is Dive Into HTML 5. They have a very concise breakdown of which formats will work with each of the browsers.
The long and short of it, however, is that h264 baseline is the way to go, especially if your HTML5 video player has Flash failover.
While HTML5 video is currently the standard in the mobile space, a back of the envelope calculation reveals that only about 40% of desktop browsers users can view it as compared to Flash's 99%+ market penetration. Moreover, you'd have to encode and store your videos twice (h264 and Theora) in order to reach all HTML5 video capable browsers.
However, by using h264 video and a Flash failover, you can cover all iDevices plus all browser that either don't support HTML5 video, or support HTML5 video for a format other than h264.
One word of warning: iDevices only support the h264 baseline up to level 3.0, so make sure to stay within these specs.
Hopefully that helps.
Related
Where should I host a video to be able to control playback rate from 25% speed all the way up to 1,000% speed (10x faster)?
Controlling playback speed is easy with HTML5 <video>. However I can't find a video host to support the speed range I need.
Options I've considered:
Self-hosting
One option is to host the video on my own servers. From what I've read this comes with a lot of complications, and it's preferred to host on existing services (Youtube, Vimeo, Brightcove, etc).
Youtube
I looked through the YouTube video API, but it only has a certain range of playback rates that doesn't sound like it gets up to 1,000% speed. Although I own the videos, so maybe I have control over available playback rates them when I upload?
Vimeo
No playback rate controls.
Brightcove
API has a function for setting playback rate. But also requires paying...
You may be able to make use of MediaElement.js particularly with this example here. It is possible that YouTube simply won't serve the content fast enough to run at 1,000% speed, however.
If that is the case, I do think that rolling on your own solution with the <video> element is easiest here, making use of any CDN service to serve your content. The caveat here is that you are restricted by browser support, though almost all modern browsers will support the <video> tag.
It doesn't look like this is possible unless you use the HTML <video> element in a custom implementation. Even the Youtube API states:
Even though the AS3 player supports playback rate controls, variable speeds are currently only supported in the HTML5 player.
At present (May 2015), your best bet is to create your own solution, since youtube seems use flash even on some browsers that support html5 videos, like my Opera 29 (though if I change my user-agent to chrome, it does serve the html5 player...). Most browsers can handle mp4, and you could encode the video at different playback speeds as a fallback if the <video> element isn't supported. At this point <video> support is approaching 95% in the US, so a fallback may not be necessary depending on your audience.
Another point in favor of using your own solution is that youtube seems to only support playback up to 2x speed (200%).
The biggest problem with hosting your own video that isn't solved by the <video> element as far as I've seen is the load on the server. Using a CDN would probably solve this problem. Please note that my laptop can't play smooth hd video (well, DVD quality, I don't have a lot of videos to test with) served from my own machine at more than 2x, so unless you're using very small videos you might find 10x impractical.
HTML5 Rocks has a good overview of setting up the <video> element.
You can host the media files on AWS S3 (either on AWS itself or compatible services such as Dreamhost). S3 solves some of the FTP issues with self-hosting of media files such as uploading large files, versioning, etc., and it might be a reasonable compromise when complete media-player control is a must.
If the above solution is not feasible then you can:
Transcode the media upfront in several most-relevant speeds. Changing the playback speed will mean switching to a different movie.
Provide the option to download the files or relevant chunks so the user will use a local player (e.g. VLC) to "play" with the media.
Can be done with Vimeo, the Pro version anyway.
I go to the hosted video, Video File and Access your video files.
There are links there to video files that can be use as the source for the HTML5 video.
<video id="video" src="http://player.vimeo.com/external/1278xxx.hd.mp4?s=xxx&profile_id=119">
After that it's using jQuery to get a handle on the video
var video = $("video")[0];
And changing playback rate is
video.playbackRate = 0.25;
Might run into some security issues as anyone with the link can now download the file with a Right Click and Save As.
Problem:
To get an iOS app that streams video accepted into the app store, we need to have a HLS version.
What’s the problem?
Android does not support HLS well, and for other reasons, we need to store MP4 and HLS files of the same content.
What’s the difference between MP4 and HLS and why do you need to store both?
MP4 is a container that stores H.264 video and AAC audio for best compatibility in HTML 5 browsers – jsvideo players often have flash fallback if the browser does not support MP4 video in HTML 5 that use the same MP4 file, but played through flash.
HLS is a protocol where text files (.m3u8) contain references to playlists, which themselves reference .ts files (or m2ts), which are mpeg-2 transport streams, not to be confused with mpeg-2 video. The .ts files are containers for the same H.264 video and AAC audio.
Why am I complaining?
It takes time to create the HLS files and playlists from the MP4 files
(Most importantly) We are now storing twice as much data on S3
Why should I care? If your S3 bill is $10K per month for storing both MP4 and HLS, now it is only $5K. Or put another way, if you are paying $100K for storing data in MP4, it would cost $200K to store the same content in both MP4 and HLS.
What do I want?
I want to store only the .ts files and serve both desktop users, iOS users, and Android users with that single file.
Is it possible?
Doesn’t HLS require 5-10 second .ts segments instead of one big file?
As of IETF draft 7, and version 4 of the protocol, HLS supports the tag EXT-X-BYTERANGE which allows you to specify a media segment as a byte range (subrange) of a larger URL.
Are .ts files compatible with HTML5 video?
Apparently not. They are a different container than MP4, yet contain the same video and audio content. Worth looking into how to store the raw video/audio data once and simply using the correct containers when necessary. If JS video players can convert HTML 5 MP4 files into Flash video on the fly if the browser does not support HTML 5 MP4, then why not be able to do the same with M2TS data?
I might be ignorant on some level, but maybe someone can shed some light on this issue, and possibly present a solution.
There currently is no good solution.
A little background.
Video streaming used to require custom protocols such as RTP/RTMP/RTSP etc. These protocols work fine except, we were basically building two separate networks. One HTTP based for standard web traffic, and the other one. The idea came along to split video into little chunks and serve them to the player over HTTP. This way we do not need special servers/software and we could take advantage of the giant HTTP CDNs that were being built. In addition. because the video was split into chunks, we can can encode the same video into different qualities/file sizes. Then the player can choose the best quality video for its current bandwidth. This was the perfect solution for mobile because of the constant changing network conditions. Several competing standard were developed. Move networks was the first to market [citation needed]. The design was copied by Microsoft (Smooth Streaming) and Apple (HTTP Live streaming aka HLS). Microsoft is phasing out smooth streaming in favor of DASH. DASH looks like it will become the default streaming solution of the future. Except, because of its design-by-comity approach, it has basically been stuck in comity for a few years. Now, in those few years, Apple sold Millions of IOS devices. So HLS can not just be discontinued. Why doesn't everyone just use HLS then? I can think of three reasons 1) Its Apples standard, and people are haters. 2) Transport streams are a complicate file format. and 3) Transport streams a patent encumbered. MP4 is not patent encumbered but it also does not have the adaptive abilities. This make user experience poor on 2G networks. The only network supported by the iPhone 1. Also AT&T at the time did not want full bitrate video streamed over there woefully inadequate celular network. HLS was the compromise. All of this predates HTML5. So the video tag was not even considered in its design.
Addressing your points:
1) It takes time to create the HLS files and playlists from the MP4
files
This is a programing website, Automate it.
2) We are now storing twice as much data on S3
[sic] I want to store only the .ts files and serve both desktop users,
iOS users, and Android users with that single file.
You and me both man :).
Possible solutions.
1) What is specifically wrong with Androids implementation? (except for lack of in older devices)
2) JW player can play HLS (Not sure about on android)
3) Server side transmux on demand.
Doesn’t HLS require 5-10 second .ts segments instead of one big file?
You can do byte-ranges, but you need to make sure all devices you are interested in support it.
If JS video players can convert HTML 5 MP4 files into Flash video on
the fly if the browser does not support HTML 5 MP4, then why not be
able to do the same with M2TS data?
They don't convert. Flash natively supports mp4. It is possible to convert TS in AS3/JS. I have done it. JW player can convert TS in browser. video.js may be able to as well.
Everyone knows about there instructional videos http://delphi.wikia.com/wiki/Delphi_Videos but I want to watch them on my iPad when I go on vacation.
The problem is the videos are in swf and will not play on my iPad. Does any know of another source for these videos in another format?
Thanks.
For the moment flash video is the container of choice for most video content on the internet. Saif is right. If you want those specific videos you'll need to convert them yourself. There are several decent flv to mp4 converters available for free (Miro comes to mind). SWF is takes a bit more work to extract the video content.
Now if you are looking for Delphi content that's already available in MPEG 4 you can try http://edn.embarcadero.com/tv. The content from the most recent Coderage event is available as an mp4 download.
You can convert them into a proper format using a free video convert like Any Video Converter
I've had reasonable success watching on-line Flash content on my iPad using iOSFlashVideo.
Not tried it on off-line flash files though.
--jeroen
What is the best way to add video uploading, encoding and streaming functionality to my Rails app ?
I'm thinking about a mix as : Rails app + Video Online Encoder + Amazon S3. What do you think ?
For the Video Online Encoder (VOE), which one is the easier to use with Rails : heywatch, panvidea, encoding.com, pandastream, ... ?
By the way, the application will allow users to play streamed videos with dynamic Texts, Schemas and Sounds added to them at the run time. There's an example :
in rails app (backoffice or frontoffice) : Video upload (.mov, .avi, ...)
VOE : video encoding in FLV format + storage in Amazon S3
in rails app, backoffice : in a home-made Flash application, "add" to the video a Text and a Schemas showed after 1 minute for example (informations stored in the Rails app DB).
in rails app, frontoffice : play the streamed video from Amazon S3 (+Cloudfront) in a home-made Flash player which show dynamicaly the Text and the Schema over the video after 1 minute of playing.
The part I really don't understand is the FLV video Stream. I was thinking that Cloudfront could do that.
I hope I'm clear enough ;-)
Thank you all for your answers !
Disclaimer: I am a co-founder for transloadit.com.
I would discourage you from rolling your own solution. The link alexy13 posted will certainly get you an application that can receive user videos and encode them. However, you'll end up with a few limitations:
Resized videos will be distorted unless their aspect ratio is 4:3. To avoid that you need to sniff their dimension before the conversion and then apply a set of padding -vfilters to ffmpeg. Sniffing the dimension correctly will require a cocktail of at least 2 command lines tools (ffmpeg itself and exiftool) + a bunch of crazy code to deal with display aspect ratios that differ from the pixel aspect ratios.
Not all videos will convert. Sometimes you need to do additional sniffing on the video content and set some custom flags, otherwise you'll receive an error. Granted, 95% of all videos will probably work - but getting those last 5% is hard.
You will need an additional web server that does the video encoding, otherwise your site will be very sluggish while a video is being encoded. You can work around this by using the nice command to limit the CPU resources used by ffmpeg, but that will result in significantly longer encoding times.
This is a short list of problems, but generally you are ~100 hours away from having a system that runs without hickups and can deal with some load.
So I would encourage you to re-consider going with a service. Our competitors are quite nice, but of course I'd also be very happy if you would check out our service (transloadit.com) or shoot me an email at felix.geisendoerfer#transloadit.com if you have any questions.
There is also a Rails3 sample application for using transloadit with paperclip and S3:
http://github.com/joerichsen/transloadit-paperclip-example
--fg
Zencoder looks cool and it probably has the API support you want. Use flash for the player I'm guessing? You will need FMS or Red5 for that. Here is a link to a really simple example that transcodes something stored in S3 for you, in Ruby of course!: http://zencoder.com/docs/integration-libraries/#library
I would feel skeptical using a free third party online service. I would consider using server-side video encoding because the third-party web service could have variable performance, and could do basically anything to the video. If you don't have many CPU's then a third-party service might be a good choice.
EDIT: This Link should help you a bit
I will be embedding a video to my asp.net mvc website.
A video on the homepage which will help people to better understand the website.
I have never done this. Can anyone tell me whats the best way of doing it.
Flash or silverlight??
I've used JW FLV Media Player. I was pretty happy with it, and it's easy to use. Flash-based.
http://www.longtailvideo.com/
My suggestion would be to go with Flash and to achieve what you're looking for, utilize swfobject. It's really quite simple to use and has a bunch of options that will be useful when you get more used to using video.
I have had pretty good success using silverlight with the Silverlight 2 Video Player as an example. However, it depends on what your requirements are.
Pros to Silverlight:
Performs Video Streaming very well
Easier to develop/customize if you are a .NET developer
Works on a variety of browser and platforms
Cons to Silverlight:
Does not support every video media type (the example above only plays .WMV files, Silverlight in general supports .WMV and .MP4)
Is not installed on as many client machines (less penetration)
Is not as well known (users may be reluctant to install it compared to Flash)
Is not as popular so there are less solutions/resources out there
Here is another discussion on the topic.
I would go with flash for only one reason: the 99% (or whatever it is today) installed base.
Then go with swfobject or JW FLV Media Player as suggested in the other answers. There is also a jQuery plugin floating around somewhere that helps deal with flash video on a site.