Yet another video player that supports WebVTT captions as well as providing other standard player functionality. MediaElement.jsĪnother complete video player that also support video captions, albeit only in SRT format. It supports the WebVTT, SRT and DFXP formats. This video player is very extensive and does a lot more than support video captions. This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats. Being a full-stack solution, Flowplayer providers their own analytics solution that is well-integrated with their players, making Flowplayer an attractive option. You can check out all their features here. This modern video player implements subtitles in both SRT and WebVTT file formats. Based on the HTML5 native player, the Flowplayer app has support for Chromecast, AirPlay, Android, iOS, Ad Insertion, DRM, and Analytics. If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use. Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it: Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer. This is done by setting the required subtlte's mode attribute to showing, and setting the others to hidden. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. getAttribute ( 'lang' ) for ( var i = 0 i and elements, and returns them so they can be added to the subtitles menu list.
Var subtitleMenuButtons = var createMenuItem = function ( id, lang, label ) ) // Find the language to activate var lang = this. As a consequence, the video controls now look as follows: In addition to adding the elements, we have also added a new button to control the subtitles menu that we will build.
#FLOWPLAYER HTML5 BUILDER INSTALL#
It is highly customizable, you can change the skin, script for particular event, add tooltips to buttons, install plugins, add share buttons to your video and track the videos views with Google Analytics.