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.)
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)
I can't watch Periscope without flash:
Since Periscope is pretty new and hype I find it a pity flash is required. My best guess then is that they simply can't.
But what is the technical restriction if one?
I can't say for sure about their own technical restrictions but they are serving the video in chunks of .ts files. It is not impossible for HTML5-based player to handle MPEG-TS streams so I can only assume this is a temporary solution.
Example of an HTML5 player handling .ts format is THEOPlayer. Also DailyMotion released an open-source JavaScript HLS streaming client. If others can already do it now, Twitter will do it soon.
Why Flash? :
It's an easy solution that works same on all browsers that it's installed onto so Edge, Chrome, Safari & Firefox etc so it will each give a consistent result to their user base without specific browser limitations (since it's a plugin).
Why assume temporary? :
First of all as you said it's still new (growing/developing). They have a few job openings for video programmers. This particular job opening requires "Ability to create an interface in HTML, CSS and JavaScript". They are currently using a Flash-based JW Player instead of a custom-made Twitter player. That will change in time.
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 notice that there are many libraries out there for playing HTML5 audio, but ain't the whole idea of HTML5 audio that we don't need a library for this to work properly?
If I don't need Flash fallback, but a simple solution for streaming music (my own) that can also play each track after each other, do I then need a library like jPlayer or Soundmanager2?
I know I need different audio formats, but that's not a problem as I won't have many tracks online.
The "whole idea" of HTML5 audio is that end users and web page authors shouldn't need to rely on a browser plugin to play audio - the functionality should be included in the browser, and controllable directly from standardised HTML/JavaScript.
I haven't used an HTML5 audio library, but looking at the jPlayer and Soundmanager2 home pages, it looks like the main functionality they offer is fallbacks for browsers that don't support HTML5 audio.
I suspect they might also have some built-in custom UI for playing audio though, in case you don't like the native audio controls that browsers provide.
You could use straight-up HTML5, but you'd soon realize that has a whole host of problems.
Library's like jPlayer (which is great by the way) account for many common issues like browser support, optimization and fall-backs etc.
If you want to code all that yourself you can, but a popular library will be leaps ahead and it's the wise choice to take.
The truth is, HTML5 offers very powerful features, but its support is thin at this current moment in time. It's all to make your life easier!
HTML-5 audio actually encompasses two distinct factions at this point. One is the audio tag and the other is the Web Audio API. The former is a quick mechanism for playing an embedding audio files, the latter is a way to play,process and manipulate audio in a low-latency manner acceptable for game development and more professional environments where features like reverb effects,filters,"3D" sound and other characteristics are needed. But to answer your question, the only real reason to use a library for the HTML 5 audio tag is (in my opinion) for backward compatibility between browsers as well as ease of use for things like multi-shot file triggering and event handling.
I'm working on kind of an educational site, where there are teachers and students around the world (potentially). Since it's a non-profit site, and I don't have the need for it to be done tomorrow (kind of a side project of something bigger), I wanted to know the best way to figure out how to do this. I'm not a programmer by trade, I've been on the systems side of things for years, but I understand most technology and the question here is more how to gauge what to do so I can get the right resources in place.
That said... here's what I am looking at. I figure the future is HTML5, and that's probably where I'd rather spend my efforts given that it will be cross platform and without the need for plugins. It will work on mobile as well. Question is, how well does HTML5 handle input media, say desktop capture and camera, or on mobile perhaps, where I'd want to use the user's phone camera, etc.
Second question is dynamic streaming... I've read about MPEG DASH, then there are technologies like Smooth Streaming (which I think given the way Silverlight is going is going to be gone or useless), then also Apple and Flash, but if I'm doing HTML5 it doesn't benefit me. Any ideas here would be really helpful, and the more detail the better! :)
That's about it... there are free chat services out there like using the MSN Web Chat controls (how good they are, I don't know, but worldwide most people have a Hotmail/MSN account) so I can use that for chat. I don't know its limitations of course, but that's something if people know or have suggestions, then I'm all ears.
As far as I know the video tags doesn't support input media as such, all it does rather well for the moment is play video files IF the file formats is supported by the given browser (different browsers different extensions) Also I have seen out there a solution where someone stream their own webcam into the video tags but that was on Mac only and using other technologies to help out.
The video tag is not supported by all browsers either, recent modern one will but if you need to support IE flash is still a better alternative way to provide videos across all platforms.
Streaming is only partially supported by some browsers and is not an easy task to achieve.
Here is few links that might help.
http://ishtml5readyyet.com/
http://html5readiness.com/
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
There are actually several posibilities to do this since HTML5 makes it super easy to stream most the basic input using video tags is however very much limited because you won't have actual access to the bytes like you would want.
But to convert something basic like mp4 to html5 compatible video just use this converter tool:
http://easyhtml5video.com/