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.
Related
How to do:
Pre loading video on play
Change resolution
Change language
In multiple platforms I see these techniques used but I can't understand which api they use to do these things does anyone have an idea?
(Sorry for the ignorance I'm Junior developer)
If you are using HTML5 on a browser then there are a set of events which the HTML5 video playback generates at different stages and which you can register to monitor and then take whatever action you want - for example change language etc.
There is a really nice illustration of the various events and their values when a vide plays (at the time of writing) here:
https://www.w3.org/2010/05/video/mediaevents.html
It's worth noting that the type of features you are describing are usually built into a HTMl5 video player if it is on a website or a native player if it is on Mobile.
For example on a browser the open source DASH if player, https://reference.dashif.org/dash.js/latest/samples/dash-if-reference-player/index.html, will change resolutions for ABR streams and provide the user controls to change it manually and to set the langage.
On Android the open source ExoPlayer, https://github.com/google/ExoPlayer, provides similar functionality, and on iOS the built in media library https://developer.apple.com/documentation/avfoundation?language=objc, provides similar functionality.
To understand ABR streams and how and why they change resolutions this answer may help: (https://stackoverflow.com/a/42365034/334402)
HTML5 audio on mobile devices has many limitations and actually I would call them bugs.
My app implementing something like audio player.
Actually all it works fine for desktop but in mobile version I encounter many bugs and have to do many workarounds different for different browsers and os to get it work, and still it sucks.
I haven't dived into web audio api, but it seems to be designed for slightly different tasks.
So my question is, is it make sense (and is it possible?) to replace HTML5 audio with Web Audio API, if I need just to load files and play them (partly, sprites) just to avoid limitations and bugs of HTML5 audio?
I think you're probably going to find at least as many bugs or edge cases with Web Audio on mobile as you're seeing using the <audio> element. Plus, support for Web Audio on mobile platforms isn't great. If it were me, I'd be inclined to stick with <audio> unless you have a specific use-case that can only be addressed by the Web Audio API.
Actually, I'll disagree - if your goal is to play short snippets of sounds, particularly simultaneously - e.g., providing sound for a platform jumper game - Web Audio is going to be a lot easier to use, including on mobile. has issues managing multiple files/instances. On the other hand, if the problems you're running in to are due to decoding issues, or you're using mostly long files, it's not going to help, as Kevin and Brad said.
I recommend SoundJS which I develop, it takes a lot of the pain out of supporting audio on multiple devices. Basically it lets you write a single code base that works everywhere and already deals with edge cases where it can.
HTML Audio element implementation on mobile devices is really terrible, so if not SoundJS I would at least recommend switching to Web Audio which works well on iOS and Android Chrome but is not supported in Android Native browser.
idbehold's comment is accurate, the most common problem with mobile devices is having to play audio inside of a user initiated event (touch). I've developed a solution to this problem, shared in the Mobile Safe Approach tutorial.
Hope that helps.
Coursera has these interactive questions in the middle of their video lecture
how could I go about implementing this myself,
or better yet, does this feature exist for public use somewhere?
Furthermore, I'm trying to decide which HTML5 video player / platform to invest in and the key criteria would be feature-rich (so as to not reinvent the wheel / spend lots of time implementing video player features) as well as highly customizable (for those custom needs).
I.e. which player should I use to get the quiz up,
but in the near future I would also need to add the speed feature that Coursera has
I need Closed Captions support
and would like to overlay slides every now and then
plus all the expected features of switching between different source resolutions (360p, 720p etc), it should work in IE, Firefox, Chrome, Safari, Android and iOS native browsers etc
Candidates
In terms of customizability and feature-set, SublimeVideo seems to come on top, but I don't know when they will support subtitles.
Haven't researched Flowplayer much, would that be better for my purposes?
Jwplayer is good for all the standard features, and includes subtitle support, but I haven't really seen any plug-ins, aesthetic skinning aside, deep customization does not really seem to be their focus / strength?
Or videojs
Or something else yet ?
Flowplayer and Jwplayer are amazing players and you could do what you want, but in the free version you can't remove their branding. I try to stick to opensource projects you you don't worry about licenses.
I've done something similar as you need with Mediaelementjs. It supports all you need at the moment, and they will support the variable speed at some point on the future as announced in their website. However it has been like that for more than a year now since I started watching, so probably your "near future" is before their "coming soon".
I think your best free option will be Videojs. They also support all you need. For the variable speed there is this plugin.
Basically you set up a listener in the timeupdate event, and when it reaches the point that you need, you attach the quiz html to overlay the video area.
I have used flowplayer extensively. I'm just now starting to dive more into their new HTML5 version. The licensing for flowplayer is reasonable. It does have a plugin for doing subtitles and the cue point functionality works great. I also like that they have the Flash version that works well for fallback and I still use it for rtmp streaming.
I have built a video presenter with synchronized slides using the flash version which I'll be changing over to have an HTML5 version. I use it to produce speaker videos with Powerpoint presentations. Sometimes we have surveys (live) so I have also been planning to build in the option for a survey slide.
You can take a look at what I have built as an example here (it has some lose ends). Example synchronized video slide presentation (I have no affiliation with Flowplayer. WebVideoDesk, branded on the linked page, is a service I am planning to launch someday.)
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/
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.