tarmstrong/bcast-experiments — pull request #13 by mydea (2014-03-14 20:40:43+00:00)
Title: Added basic support for mobile touch devices

While browsercast is supposed to work on mobile devices too, there were various problems on small-screen touch devices.

1. The provided .ogg doesn't work in Safari at all and in Mobile Chrome there seems to be a problem with it too because it always showed up as being 1:10 long instead of 1:51 which lead to various problems. I converted the .ogg to mp3 and included it as well to get it running on these mobile devices.

2. Especially on Firefox for Android the default audio controls are terribly big - a solution such as the one by sunu: https://github.com/tarmstrong/bcast-experiments/pull/8 is needed especially for mobile devices. (The controls take nearly 1/4 of the screen on my Nexus 4).

3. If the default audio-bar is removed and only the progressbar is left, touch controls for the progressbar are needed. I added basic support for this, it is now possible to slide over the progressbar. For this purpose I also made the segments bigger on touch devices. (a full copy of head.js is used for feature detection)

4. Finally, the main areas for the slides cannot be 100% height anymore because on mobile devices the browsercast-controls overlap the slides. The height is now calulated at startup.

I tested it on Chrome for Android and Firefox for Android on a Nexus 4, Chrome on a Nexus 5 and on a iPhone 4S. A demo is available at http://fnovy.com/test/browsercast/test-02/