Tweaking the Tablet Friendly CP7 UI
Server Side Fix
After trying in vain to get CP7 Video Demo captures to play from either Chrome or Opera Tablet browsers, I sent the Dropbox link to the mLearning project Intro to Disc Golf to my friends at Adobe TCS support. In debug mode you need to know when to ask for another opinion and that time had come.
In about a day, I got a reply explaining some test results along with two suggestions:
- Check the server and add the MIME type for MP4 Video. My server is Win 2003 so that made sense since MP4 is relatively newly supported format.
- Re-create the Playbar and skin to cure the missing Playbar issue.
A little Googling got me the steps needed to add the MP4 MIME type from a forum thread. Hint: If one asks a ? clearly with a few words in Google search, the first page will often contain the correct answer. In case anyone needs this info, here you go:
Sep 15, 2009 08:39 AM|LINK
1) Select the site to configure in IIS, right click and select “Properties”
2) Under HTTP Headers Tab, select “File Types” under the MIME Map section and select “New Type”
3) Type “.flv” as the associated extension and “video/x-flv” as the content type or “flv-application/octet-stream” I’m not sure on which one gives here.
4) for .mp4 files type “.mp4” as the extension and “video/mp4” as the mime type (this one I tested personally)
4) Select “OK”,
5) type services.msc, find the “World Wide Web Publishing Service” and click on the restart icon on top or open up and choose restart.”
Before Adobe TCS support replied, I’d already found a workaround for the Playbar issue. After deleting and re-applying both the PB and the skin, I decided to move the PB to the top of the CP project screen, the Tablet UI. Since viewing a tablet in landscape mode puts one’s thumbs near the top, that PB placement is acceptable with easy reach to PB controls. In spite of my selecting the “responsive HTML checkbox” during publication, the standard Squeeze/Stretch screen gestures did not work, leaving more which space around the CP7 than needed.
Given that reality it made sense to separate the TOC which I had set to Overlay in the last revision. Along with that I:
- Set the TOC font to BOLD.
- Added a few more points to its size.
- Used a higher font color contrast on the Active entry.
Now the UI has 2 navigation methods in full display at all times for the learner’s convenience.
Playing CP7 Videos
When viewing the mLearning module from a Tablet device, CP7 video slides load the HTML5 content flavor into device’s video player as seen in the snagged screen below.
The full screen effect with the video slides is a nice touch. Tapping the screen activates Play/Pause control on the video player. The Tablet’s Back-> (bottom right center) returns the learner to the CP7 slide ready to advance to the next one via TOC or PB. The arrow in the middle does not seem to work, but two navigation methods seem adequate to me.
Final Tech Note
When you select both .SWF and HTML5 output versions in CP7 publishing step, CP7 builds 3 files that can launch the movie:
- projectname.htm which launches the .SWF
- index.html which launches the HTML5 version
- multiscreen.html which tests for a handheld device with a function.
So? If you attempt to test a tablet device (HTML5) format on your desktop by using multiscreen.html, the system will simply conclude your are “not a Handheld” and load the . SWF instead. Note also the only desktop browser that plays the HTML5 videos correctly is Google Chrome.
Now onto the quiz and a few more audio notes to guide the learners through the assessment, course evaluation and other admin forms. Once these elements are developed, the full eCourse will be ready for deployment!