Play HLS with HTML5 [closed] - html

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
So i'm trying to play HLS streams on HTML5 without using Flash. We've tried many video players but they all relay on a flash player.
My question, is it possible to play HLS streams (any) on HTML5 without using Flash?
(I know of the https://github.com/RReverser/mpegts but it doesn't work on mobile and is pretty laggy.)

HLS is not supported by all browsers. I use a jwPlayer which supports both flash and HTML5 streaming (when available). Support for HLS streaming unfortunately still needs to rely on Flash to work properly across various browsers. See HTML5 HLS browser support: http://www.jwplayer.com/html5/hls/

HLS.js project is quite reliable nowadays (https://github.com/video-dev/hls.js/tree/master). It is suppported in the latest versions of the browsers. It does not rely on Flash. It can be used in flowplayer.
hls.js is compatible with browsers supporting MSE with 'video/MP4' inputs. supported on:
Chrome for Android 34+
Chrome for Desktop 34+
Firefox for Android 41+
Firefox for Desktop 42+
IE11+ for Windows 8.1+
Edge for Windows 10+
Opera for Desktop
Vivaldi for Desktop
Safari for Mac 8+ (beta)

There is no mature stable open-source HLS HTML5 player AFAIK. However there are two commercial offerings:
Viblast Player - very cheap and relatively easy to use. This one is just a bare minimum HLS HTML5 playback. The developer has to do the UI themselves or integrate it with Video.js/Flowplayer/JWPlayer.
Theo Player - I haven't had much experience with this one. The pricing is not public. The demo looks OK and it even works on most version of Firefox.
Both of these players rely on the MSE API and don't work on browsers where it's not supported (IE <= 10, Firefox).

Basically all HTML5 players need to transmux the MPEG2-TS (transport stream) segments to MP4 as most browsers do not support MPEG2-TS natively.
There are actually a few HTML5 players available which are capable of playing back HLS streams. One example would be the Bitmovin Player, which offers professional support as well as a fallback for legacy browsers. It's a commercial product, but they also provides a free plan.
Also open-source projects like hls.js are available.
However, with Apple's announcement from this year's WWDC it's now also possible to use MP4 segments with HLS, which eliminates the need to transmux. More details on how to do it and advantages are outlined pretty well in this article. Not sure which players support it, at least Apple's native implementation in Safari on iOS 10 and macOS; also Bitmovin already supports it.

THEOplayer is very interesting for this case. They allow to stream using HLS to all the popular browsers and platforms without using Flash.
They have support for Internet Explorer, Firefox, Chrome, Opera and Safari on Windows, Linux, Mac, iOS, Android and Windows Phone.
Also, contrary to earlier answers, they don't rely on MSE in order to function. As a result, this player works on all the platforms and even old IE versions (10 and up) and browsers that do not support MSE.

Related

Windows 10 Safari HTML5 Video canPlayType

Safari (version 5.1.7) on Windows 10 does not support html video and audio, but works well with same version on Windows 7, so you have to use flash to play html media in this case. This seems like quite a drawback or I am missing something. Is there a way around it?
http://jsfiddle.net/jxajbo6f/2/
var testEl = document.createElement( "video" ),
if ( testEl.canPlayType )
The number of users using safari on Windows 10 is going to be fairly small - Safari version less than 6 have less than 0.5% of total market share across all OS's according to this market share site for example:
https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0&qpct=3&qpcustomb=
It could still be important for you, however, if you have a target audience or organisation that do need to use it for some reason.
The problem is that the HTML5 video standards and extensions keep evolving so a browser not being developed, as Alexander points out above, simply cannot maintain compatibility.
In addition to this the OS itself has been updated and may provide new or different mechanisms to playback videos, for example leveraging HW acceleration and allowing for DRM, and only limited support may be offered for older interfaces. Falling back to Flash looks like your best alternative if you really have to support this use case.

Video Streaming Solution for Apple/Android/Desktop

I need to stream a video to a variety of browsers and devices, all main browsers, IE 8+, FF, Chrome, Safari and to Android and Apple mobile devices. My videos will be stored on S3/Cloudfront.
I've looked into the options and have come up with HLS streaming, which will work on apple and android devices, and safari desktop.
For other browsers I will use a flash fallback implementation. I know JW player can read a HLS stream in a flash implementation. Does anyone know of alternative free software?
My question is, is there a better approach, what is your solution?

Current state of HTML5 video in 2013

I've been using flash video for embedded videos on my site. My old 2.2.x android plays them fine but I'm noticing a lot of new android devices as well as apple devices will not play my videos because flashplayer is fading, so I'm investigating the solution - and HTML5 video seems to be the new thing.
I've just spent 2 hours searching google and read a lot of stuff but most of it is from 1, 2, or 3 years ago -- and judging from what I've read it looks like using the html5 video tag still requires each video to be converted to multiple formats, and full screen is some sort of vendor specific extension -- different on each browser which happens to support it.
So my question is whether HTML5 video tag is a full replacement for the flash player now, or is it still a kludgiferous scheme requiring browser specific hacks for half a dozen most popular browsers -- in 2013?
Does it work on PC's, Macs, Androids, and iPhones?
caniuse.com is a great resource for pretty good data to answer this question.
As of now...
~92% of web users' browsers support the HTML video tag. The main one that doesn't is Opera Mini (about 4.5%). For those users, you can use a Flash fallback, which is actually not too much work. There are a handful of very simple solutions that will handle this for you, like videoJS, jPlayer and JWPlayer.
For now, you do need to encode in two, possibly three formats. About 92% of users support MPEG-4/h.264. Opera Mini and IE8 do not support it.
Only about 71% of users can support full-screen HTML video, so for Android and iOS (mainly), all versions, the best you can do is set the video to fill 100% of the browser window. If full-screen is that important, then you'll want to use Flash.
So, in short, yes, HTML5 video does require a little extra work, but at this point, it's not that hard to get right, and it's a standard that's moving in the direction of better stability and uniformity. YouTube, for example, uses it (with fallbacks), if that's any indication that it's ready for prime time.

Minimum hardware requirements to run an HTML5 capable browser

Which is the browser with minimum hardware requirements with full support to HTML5?
The application should be able to play videos and perform some javascript transformations.
Windows or Linux it doesn't matter (but I bet my two cents on Linux as the winner).
Thanks in advance.
You may be putting the cart before the horse here.
There are a lot of "post pc" devices out there that have very low hardware specifications (iPod/iPad/iPhone, various Android devices, Blackberries, Windows Mobile Devices) that can run lightweight, full featured HTML5 browsers based on projects like WebKit (webkit.org).
Following browsers supports HTML5 for better client rendering especially when having flash, video streaming and mobile version of site. browsers: IE 10, Google chrome, Opera, netscape navigator.

Can I use html5 in my mobile website?

I must create a web site optimised for mobile devices, can I use html5 and css3?
What are the main limitations?
Which devices are compatible? (IOS, Android...)
Regards
Yes - to a degree. The website http://caniuse.com/ details HTML5 availability for the following browsers:
iOS Safari
Opera Mini
Opera Mobile
Android Browser
You can, with some limitations. Basically you'd better use some "pre-cooked" framework like Senche Touch or jQuery Mobile.
Simple answer: the best support for HTML5 in mobile phones is given by iOS and Android browsers.
Yes you can! and about compatibity... it depends on the browser... the new versions of safari that run on the iOs 4++ support html 5...
iOS and Android will both support HTML5 and CSS3 (and well). You'll run into some problems with windows mobile (which runs a modified version of ie7)
Back in April, sources announced that LG would be the first company to launch an HTML5 compatible browser.
Where this was over 6 months ago, I haven't been able to find any other sources that woukd indicate whether any phone browsers would support it.
The best thing to do would to point your mobile device (or emulate one) to a site made with HTML5.
After a little more research I found this quote from the apple.com site.
"Every new Apple mobile device and every new Mac — along with the latest version of Apple’s >Safari web browser — supports web standards including HTML5, CSS3, and JavaScript."
Also for Android, check this page.