I am developing a web app that will stream videos to a user, and the user will interact with the videos, for example recognize events on a specific timestamp, and then possibly store that in a database along with the video. I am going on with HTML5 because it is new, and compatible with tablets and smartphones. (iPad etc etc..). My question is that, does HTML5 offers this kind of customization ? or is it done only on Flash? And is there like a specific API Documentation about HTML5 video ?
(It will be all based on ruby on rails, but I don't see how that matters)
There are possibility’s to customize with JavaScript. But I would recommend to use an already made one
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.
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 would like to clarify certain things with what I found and raise certain questions with things that I dont know,
Capturing cam/mic through browser could be done through getusermedia();
Is there anything for i devices? because getusermedia() doesn't seem to work in i devices
How could I trap actual audio from web browser application (eg. if I play an audio file and forward it 2mins, I would like to capture the actual audio stream from the html5 player so that I hold the actual audio data)
You need to use Flash, if you are not going to support mobile devices. One best solution is to use wami-recorder.
From their website:
The Problem
As of this writing, most browsers still do not support WebRTC's getUserMedia(), which promises to give web developers microphone access via Javascript. This project achieves the next best thing for browsers that support Flash. Using the WAMI recorder, you can collect audio on your server without installing any proprietary media server software.
The Solution
The WAMI recorder uses a light-weight Flash app to ship audio from client to server via a standard HTTP POST. Apart from the security settings to allow microphone access, the entire interface can be constructed in HTML and Javascript.
Hope this helps.
I have a jQuery Mobile website I created for a friend/client of mine. It only has 6 pages or so (2 of them are dialog windows). The site has HTML5 video with fallback for flash support via the videojs library. All videos are encoded properly in mp4, ogv (theora), and webm and so far play on every device I have used.
My problem lies bandwidth, the purpose of the program really needs to be an application because these are informational videos that may need to be viewed at any time, even with no web access (web access is required for first login to verify credentials).
I was left with 3 solutions, try writing native apps for all the platforms myself in their native languages, use Sencha Touch (which I am comfortable enough with extJS to do), or taking my existing jquery mobile app that is 100% functional including log-in and some backend package management to assign users a package of videos (there are multiple packages each with between 8-20 videos), and follow the jQuery Mobile tutorial for getting your app ready for PhoneGap, I believe its only enabling two settings, and both are to enable "cross-domain" requests, since my current web app would be running as localhost, it would see the scripts as external pages.
My main question/problem is for one, I have never used PhoneGap; aside from their Hello World android tutorial, and I know there are other all-in-one frameworks out there now: PhoneGap, Titanium, Corona, Adobe Flex (which I am installing while writing this tutorial, to see what it has to offer. If it has features like encoding videos automatically for the target device (video resolution changing), or even has local video playback features at all that may work.
Does anyone know which of the current frameworks have the ability to install a set of videos to the sdcard, (totaling around 6mb per install), and play them natively (by that i mean, in the devices native player, not inline inside of a webview). Which on android phones anyways, my current videojs based player plays the files natively in everything I have tried it on.
I just need a push in the right direction, if there is a PhoneGap plugin that I don't know about that allows videos to be played from the sd card, that would be terrific. Although I am not very happy with the speed of the android and blackberry webview controls. So something that uses 100% native controls would be great. I hope you guys can come up with some ideas, you can see the current app in action at m.yourvideobenefits.com email:abc#tool.com password: demo
You should view it from your phone if you want to see it properly, but if you do not have a smart phone; keep in mind that when viewing this page certain desktop browsers, the videos become their actual size after they are through loading. This is because i have autoload="true" in the video tag (which is ignored on most phones, but believe it or not, setting autoload="true" is what actually allowed the videos to not play inline on certain devices. A bug on the device, I am sure...but without this tag the videos played inline on iPhone 4 with the latest iOS version.
You could do it very easily with phonegap; you already have your web page, so it would be much less work, probably.
You could get the videos from inside your apps bundle in ios, and then it wouldn't be hard to select the one with the best resolution for the device being used. You could also download the videos at the perfect format and resolution the first time your app plays from your server using the file api. That convined with the storage api is nice for actualizations.
There's a plugin I use for android, because video tag is sometimes bugged or doesn't work at all in older versions, https://github.com/phonegap/phonegap-plugins/tree/master/Android/VideoPlayer.
It only plays from web or sdcard, but that's rarely too bad.
I can't help you with black berry, but I'm pretty sure there must be a way of doing it. And, anyway, appcelerator doesn't support it yet, so you would probably had to do it natively. Even if there isn't a plugin for black berry, you'd probably have to chose between native developement and html5 player inside phonegap. I won't give you my opinion about it here, for I'm not the one to give it and Stack Overflow says I shouln'd give it anyway.