Wednesday 19 December 2012

18 Fullscreen video - hide everything accept the video player

Internet based videos need the option of playing full screen, I think that everyone expects this now. The player still needs to be accessible but nothing else on the page should be; links or any other items for example. 

Why should the user be able to tab to an item that is no longer needed if the video is playing full screen? Of course the answer is that they shouldn't, it is really confusing when it happens.

The video player being developed is currently in a <div> tag called #vidPlayerContainer. I want to keep that item visible and hide everything else. To do this I change the CSS display to none for all other objects. Doing this removes all of those items from the tab order.

To do that I used this nice piece of jQuery I found on Stackoverflow which does just that, it runs whenever the full screen mode changes:

$('body > :not(#vidPlayerContainer)').toggle();

The code says find anything inside the body and toggle it on or off as long as it is not #vidPlayerContainer. Pretty neat and a lot more concise than the horrible loops (and hoops) I was planning to jump through.

It's still possible, fortunately/unfortunately, to tab to the browser chrome in some browsers, which feels a bit annoying. I'll look into that further in the new year.

Happy New Year everyone.


Sunday 9 December 2012

17 Creating a new batch of subtitles

This week sees me doing a bit of subtitling work.

As mentioned in previous posts the best place (in my opinion) for creating subtitles for video (for free) is the Amara/Universal Subtitles site.

While saving my subtitles I noticed a small change - it is now possible to save the subtitles into different formats other than SRT. No unfortunately not WebVTT but it is possible to save directly into the required Flash subtitle format TTML.

One small subtitle conversion step removed from the subtitling process.

It keeps getting easier.