HTML5 and MP4 vs. M2TS containers - ios

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.

Related

Serve single live .TS for AVPlayer iOS

Given I have a live .ts file, is it possible to serve a static HLS playlist to embed the single ts file without segmenting it.
I am looking at playing in AVPlayer (iOS native). It is capable of playing .ts files but only if it's wrapped and served in a HLS playlist. Is there any special tags or version in need to support this usecase or is this not possible?
The goal here is to trick HLS into doing progressive download of the transport stream.
I'm gonna big to say no, it's not possible. Even if it "worked" it's unsupported and could stop working any minute. There are many, many (many, many) free, open source, commercial, official, unofficial, etc, segmenters available, including ffmpeg. Just use one.

Prevent DASH video streaming from YouTube

I have a Roku app and some of the videos come from Youtube. I have no problem retrieving the videos but if I select a video with HD it wants to automatically stream the Dash version. I can prevent Dash if I force a non HD version but who wants to watch a SD version..
SO I am wondering is there any way to force the mp4 stream opposed to a Dash stream?
I have read that XP does not play Dash and so I tried using Windows NT 5.1 as the user-agent but that did not work.
Any help would be greatly appreciated.
DASH and MP4 are not mutually exclusive - they perform different functions in the video delivery.
In simple terms you can view it like this:
Camera captures frames - 'raw video'
The 'raw video' is encoded in some way to store it, generally in a way that balances video size vs the quality. The video is then sometimes refereed to by the encoder used (the codec) - for example if a h.264 codec is used the video may be called a h.264 video.
The video stream, i.e. all the individual frames that make up the video, is packaged into a container. This container may contain video and audio streams, and it may even have multiple video streams. The video is then often referred to by the container format - for example if our h.264 encoded video above is packaged into an MP4 container it is often referred to as an MP4 video, even though the MP4 'container' may contain several video and audio tracks.
To improve the quality of video streaming, a video may also use a streaming protocol like MPEG DASH. The theory here is simple: multiple copies of the video are created with different bit rates, and hence different size and quality. Each of these copies is broken up into, for example, 10 second chunks. An index file is created, called a manifest, and a pointer to each video and audio stream is included. A client playing the video, for example a browser, requests each 10 second chunk as it needs it. It chooses which copy of the video it selects the next chunk from depending on the current network conditions. This means if the network is good it can switch to higher quality copy for the next chunk and if there is a problem it can switch down to a lower quality chunk. If we take our example video encoded by h.264 and put into a MP4 container, we can now package it using DASH streaming format. A video packaged like this is often referred to as a DASH video.
The above is a simplified overview, but it hopefully highlights that your videos may be actually MP4 and DASH, and in fact commonly are.
As an additional note, different devices may support different codecs (and even codec profiles), packaging formats and streaming formats - for example iOS devices tend to support HLS rather than DASH at the time of writing. This changes frequently as devices and standards evolve and is one of the reasons it can be tricky to find a single format that will play on all devices and clients - for this reason servers often will provide the same video in multiple codec and streaming formats to support as many devices and clients as possible.

Host a video, and have playback speed between 25% and 1,000%

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.

Audio.js, how to add support for formats and stream types

i'm making radio database and i'm using audio.js to play m3u streams.
How i add support for acc,ogg,wma,mms streams and shoutcast stream type?
Thanks for answers:)
i'm making radio database and i'm using audio.js to play m3u streams
M3U isn't a stream nor media itself. It's a playlist. That's all. You need to parse that playlist.
At the simple level, it's just a list of line-delimited URLs. There are comment lines that contain other information though.
http://en.wikipedia.org/wiki/M3U
How i add support for acc,ogg,wma,mms streams and shoutcast stream type?
AAC is a codec. Ogg is a container format. WMA is a codec. MMS is a protocol. SHOUTcast is a modified version of the HTTP protocol, but also with its own metadata wrapper. As you can see, you are comparing apples to trees to cars to trucks.
In any case, support for codecs, containers, and protocols is dependent on the client. You cannot add support for these in JavaScript. There are some extremely experimental JS decoders for some codecs but they're not quite ready for production use. In the mean time, the browser has to support what you want to play, and if it doesn't there isn't anything you can do about it.

File formats for streaming videos in HTML 5 in regular and mobile devices?

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.

Resources