(mediaElement & captionator) in videoPlayer

Novak, Alexey anovak at ocadu.ca
Wed Jan 25 14:20:14 UTC 2012


Hi all,

I managed to do some working prototypes of integrating MediaElement and Captionator into a videoPlayer.
There were couple of discussions about using mediaPlayer for playing videos in browsers which do not support HTML5 as well as using Captionator for displaying subtitles/captions/tracks inside of a videoPlayer instead of built-in caption component.

I made a simple diagram which is supposed to show which components are going to be used and when:

[cid:F50FC72D-D666-4292-B61C-684C81AF5E06 at idrc.ocad.ca]

Browsers used during my testing:
IE 9.0.8112
IE 8.0.6001
Firefox 9.0.1/6.0.2
Chrome 16.0.912.75
Safari 5.1.2
Opera 11.61

My working code is were far from a good one but I just wanted to make it work to see that using of those elements is feasible in videoPlayer component. The next step would be incorporate those elements into our videoPlayer properly as well as to make use of them through fusion component way. I might ask Cindy to give me a hand with this task since I am still in a process of learning Fusion framework.

Few notes:

  *   It seems like we are going to use mediaElement only in a case of old IE versions OR maybe some old versions of Safari, Opera ?
  *   Also, I have not included different file versions into this simple diagram since during the test was using only with .mp4 file. Not sure what file formats we are going to support and how far would we would go in order to support them. Just in case, a matrix of supported formats by mediaElement could be a point of interest for us: http://mediaelementjs.com/ , take a look into Browser and Device support section.
  *   It looks like Captionator is using WebVTT formats so we might need to do some extra work if we want to parse JSON files as captions in videoPlayer.
  *   It looks like mediaElement is using SRT formats for its captions. But SRT files are usually very close in format to WebVTT so it would be interesting to see if mediaElement can play VTT files instead of SRT.
  *   Captionator will block any click event on the videoPlayer since it is been rendered as a DIV element on top of a HTML5 video component capturing any click events. I will try to find the way to ask a question about passing a click event through on a bug tracker if there is one OR will ask creators of Captionator directly.

Just a question out of curiosity: what is the main strength of our player in comparison to someone who would pick mediaElement with all its features and strength combined with captionator?
It seems as if you combine those 2 you can get a pretty powerful video player.


Please feel free to make any comments or suggestions.

Thanks,
Alex

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20120125/68db73b1/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: vp_diagram.png
Type: image/png
Size: 61926 bytes
Desc: vp_diagram.png
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20120125/68db73b1/attachment.png>


More information about the fluid-work mailing list