Synote Mobile one of a collection of 15 OER innovative projects

Under the title of ’15 Reusable Technical Solutions for OER’  Amber Thomas has described the results of the recently finished JISC/HEA UK Open Educational Resources (OER) Programme.

(Slides created by JISC: Programme Manager Amber Thomas, Programme Office Alicja Shah, Technical Advisory JISC Cetis particularly Martin Hawksey. Dandelion Clock sourced through flickr and attributed on the front slide.)

The JISC Digital Infrastructure Team website hosting the slide share slides states that:

“These solutions address a range of issues that we identified in our original call for proposals, and they specifically address:

  • how to create rich machine-readable resources that contribute to the global content commons?
  • how to simply and cheaply host and display content?
  • how to enrich and manage audio-visual content in an educational context?
  • how to bring OER content closer to the everyday life of academics?
  • how to make use more visible to aid discovery and decision making?

All of the project outputs are reusable and the slidedeck includes links to key information. Final project reports will be available from the strand project pages. Please do try out the solutions provided, feed back to the projects and join the lively oer-discuss list to connect to people supporting open educational resources.

A huge thank you to the projects, and to Martin Hawksey, Phil Barker and Lorna Campbell of JISC CETIS for doing such fantastic work.”

Grande Finale for Synote Mobile

Browse Synote Recordings

Browse Synote Recordings for a lecture series

Recent videos uploaded to Synote are going to be used in a lecture series on Assistive Technologies and Universal Design – this video demonstrates how the series can be reviewed on an iPhone with an annotation being added as a result of looking at the transcript generated by YouTube and automatically imported into Synote.

Some annotations have already been added in true Blue Peter style.  They illustrate how colour and tagging can be used to help with categorisation and the development on themes when using resources.

Synote Mobile Outputs List

In the first meeting three outputs were discussed namely:

  1. Design and development of the Synote web app suitable for mobile technologies
  2. Conversions of permitted recordings to suit the mobile platform
  3. Issues related to media types, transcriptions and annotations.

There is now a web app capable of working in the majority of browsers working on a mobile device running an Android, Windows, Apple iOS system.  Content can be found at

It was found that the easiest way to make conversions suitable for Synote Mobile was to use YouTube with its captioning and transcription service that allowed for timed stamped data to be annotated and shared with others  – see recording 

There were numerous issues relating to media types, presentation of transcriptions and annotations that needed to be resolved during the time of the project.  The were discussed in a series of blogs the most important being the development of a matrix to show which browsers could play videos within a browser during the life time of the project.   

It might have been easier to have made a series of device specific apps for Synote mobile which may have offered more usability features in terms of button sizes, menu options and player modes.  However, this would not have allowed for many other access requirements, as was possible through an HTML 5 version.  The final solution works with most browsers despite the lack of player access alongside the transcription on smaller mobile devices, It allows for accessibility with captions and transcriptions where the technology has allowed and provides the user with a way of interacting with others whilst working with video and audio files in one setting.


Synote Mobile Use Case and Impact

What is it that users want to be able to do and currently can’t?

Students with Phones
Many UK students carry mobile devices capable of replaying video and want to use them for learning. However the majority of these devices cannot replay Synote’s searchable, accessible, annotated recordings. Synote was designed for use only with computers because in 2008 few students had phones or tablets capable of replaying Internet video. Synote has been used by students worldwide to interact with educational and lecture recordings.

Dr Wald has made all his Synote recordings available as Open Educational Resources and Synote itself is a very valuable Open Educational Resource, being Open Source and freely available and facilitating the reuse and repurposing of anyone’s OER recordings without requiring a copy to be created. Accessibility/Usability is a required topic on any course concerning software or the web and Dr Wald has presented and published internationally about his innovative module on assistive technologies and universal design which is freely available and includes hundreds of Synote recordings by many international experts as well as student presentations on their accessibility evaluations and associated online materials.

What will you change to make it possible for them to do it?

Searching for the web accessibility lecture on Synote using an iPhone

A new accessible mobile HTML5 version of Synote has been created to replay Synote recordings on any student’s mobile device capable of connecting to the Internet and playing videos. The use of HTML5 overcomes the need to develop multiple device specific applications. The original version of Synote displays the recording, transcript, notes and slide images in four separate panels which uses too much screen area for a small mobile device. Synote Mobile is able to display captions and notes and images below the video. Where necessary existing Synote recordings will be converted into an appropriate format to be played by the HTML5 player.

How will you know if you have succeeded?

Success will be demonstrated by objective tests using Synote recordings and mobile devices and subjective evaluations by students replaying and annotating Synote recordings on their mobile devices.

Example Scenario

iPhone synmarks

Synmarks or annotations using an iPhone

During the lecture Susan takes short notes on her phone using the Synote annotation system or synmarks with the lecture recording after the lecture allowing Susan to easily find relevant sections of the recording using ‘timestamps’.

She is able to highlight important points, set up categories for themes and tag to aid searching in the future.  She is using this method to help her write up a future assignment on the subject of web accessibility.





iPhone playing a video

iPhone showing the video to be played

Susan and her four friends then revise together in a small room in the library by writing on the whiteboard as they collaboratively go over previous Synote recordings and notes using their phones and add to and amend their own synchronised notes as appropriate. They can also create and record a group video presentation for their coursework, adding an index and notes.








iPhone transcript

Automated transcript shown on Synote Mobile

Using Synote Mobile in this way enhances their collaboration, discussion and learning compared to their previous use of five desktop computers in a line in the main computing laboratory with very little desk space and others objecting to their noise.

By using YouTube as the upload vehicle it is possible to have an automated transcript that can be corrected and annotated as above.

This allows for video captured lectures to be not only more accessible to those who have hearing impairments but also allows all students to go back over content in a way that may suit their learning preferences whether they are in the university, at home or when travelling.

Last Meeting – Outputs and Lessons Learnt

Decisions around what has been developed and the best options for the future of Synote Mobile.

white board choices

Synote mobile has been developed as a mobile phone web app as mentioned in the previous blog.  It allowed us to play videos, read transcripts and annotations etc. BUT we discovered that much depends on the phone operating system, browser and player as to how much access can be achieved especially  in terms of reaching the video player controls and captioning within the web page.

The main comment was that It is easy to navigate around a specifically designed mobile web site and most features can be used in the phones that offer the access as of Sept 2012.

video on mobile top view

video on a mobile - top view

However, testing also showed it is possible to work with the videos available on the Synote linkeddata site on a smaller screen – 3.5 inches. It may take three scrolls to reach the bottom and require some horizontal scrolling depending on whether one is viewing in portrait or landscape mode.

When it comes to outputs – It is possible to add a transcript and annotations – small fingers and delicate typing required!

The main comment was that the site we have at present could be improved with further work – more responsive designing required.



video on the mobile

video on the mobile - second scroll

Should we offer two versions – one for desktop/tablet and then a separate version for the mobile?  In other words two websites  linking to one media collection – this would allow for an improved user experience on the mobile but mean that two versions need to be maintained.

Or …

video on the mobile - third scrollOffer one website that is developed in a responsive manner – all the interactions would be available but some may be harder to achieve on a small screen.


If time was not an issue it would be preferable to develop two sites as a final output – one specifically for the mobile phone.   However, with all the changes occurring with aspects of online video streaming and HTML5 standards it would appear wiser to spend time on making a version of Synote mobile  that is as responsive as possible – working on all platforms whatever the size of screen.

Just as a final point and an illustration of the constantly changing scene…

Recent updates on video streaming would now allow us to use an Apple streaming video server that would appear to allow for captioning on the iPhone whereas at present this is not possible with YouTube videos.

Evaluating Synote mobile

evaluation group

The group meet to evaluate Synote Mobile

A small group of potential Synote mobile users met over lunch bringing with them a collection of devices. The Synote Linkddata home page for the application was provided with an introduction by Yunjia.  The desktop and tablet version of Synote mobile work from these pages and the specific version for smaller screen (those around 4 inch diagonal) is provided by a link from the Mobile Access paragraph. Everyone was happy to comment and agreed to some pictures being taken for the blog. We knew there were several issues that still had to be overcome and explained the barriers to full use due to browser and mobile device problems with video downloads and HTML5.

iPhone play video

Just play the video for a few seconds

On all the devices it was essential to stress that there was a need to buffer the video for a few seconds before any of the menus would work – this is because mobile phones are set to avoid the download large amounts of data and no optimisation is possible. 

Comments were taken from the users – headings in the table below show the devices used and the browsers chosen.  A few areas were covered but it was not possible to track all the comments made during the lively exchanges!



The overall opinion of the website was good and the main purpose was to discover what further issues were arising and whether users had any other requests from the point of view of the look and feel as well as usability and accessibilty.

iPhone Safari

iPhone Opera mini

iPad Safari

iPad Chrome

Android Galaxy native browser

Android HTC built in browser

Android  HTC Opera Mobile

Website homepage

Look and feel

Web page too wide. Needs to be more resposive Looking good Good Clear and easy to use Easy to reach link Easy to reach link

Website homepage

Ease of Use

login needs page width to be responsive – Onscreen keyboard works well. Login in good Login easy to use Log in  good Log in issue need to be in portrait mode otherwise the edit boxes are hidden by onscreen keyboard Login possible but small screen means not easy. Login hampered by onscreen keyboard

Synote mobile get to video

Download and the pause.  Both central button and play button below works does tracking Total failure with video – just presents as a download Tracking, pause and start do not working on player Tracking, pause and start do not working  on player video needs to buffer.  -video needs to buffer. Video plays well from both buttons on the video and below

Play video

Once a video had been played the buttons stop responding .  Needed to refresh the page Main play works but Play button below the video is not working. Play button works well play button below video tried to load it. Can’t get out of full screen  mode without pressing back button which takes the video player out of ready mode.  Affects jumping to media fragments Can’t get out of full screen  mode without pressing back button which takes the video player out of ready mode.  Affects jumping to media fragments

Read transcription

That worked well but transcript box could take more text, depending on the screensize – needs to be clicked on to make bigger. Possible to reach trancript and return to video but no point as it did not play Some of the buttons seem to lack response or maybe very slow From video to transcription can be slow  – plays video but blank page shown Went relatively quickly Jumps back to beginning  not to position of that section of transcript.

Add/Edit transcription

N/A N/A Works well in portrait mode for editing Video to transcript section and vice versa works well. N/A N/A

Read annotation

Easy to reach once video buffered. Possible to reach synmakrs Easy to read Should the 7  inch screen be considered as a mobile device rather than a tablet as it looks better in landscape but  a lot of white space Can access synmarks Can access synmarks

Add/Edit annotation

N/A N/A Should always use pause button when working with annotations – causes confusion as the stop button  – then restarts at the beginning. Can annotate and better in portrait It is all possible just takes time and rather temperamental – seems to be linked to issue with J-Query library N/A N/A
Android login

Log in on the Samsung Galaxy - Android OS.

One of the most annoying issues was the Android onscreen keyboard was not as responsive and the iOS version which never fails to stay below edit boxes whereas the Android OS is happy to cover them on the Samsung Galaxy.




Tim Berners Lee media fragment

Anyone willing to annotate this media fragment?

HTML 5 Video and Support in Mobile Browsers – Lessons Learnt

Yunjia Li wrote on his personal blog the following article after our last Synote Mobile meeting with Wei Jing who has been helping us develop the tables you see below.  

“Since proposed by Opera Software in 2007, the HTML5 video tag has been around for a pretty long time. Video tag is a great step forward to make video the first class citizen of the Web. Unfortunately, different browsers understand the citizenships in different ways. The citizenship of AVI is terminated. WMV needs to hold Sliverlight Visa in order to get the entry clearance to browsers other than IE. FLV’s visa application for iOS has been Denied by Apple Empire and Adobe has declared that he’s not going to help FLV to re-apply the visa again. H.264 is like a mafia, who asks for protection fees from browsers. You see, there is no Federal Government in HTML5.

Since the smart phone joined the Web, things are getting worse again. It seems to me that there is no systemetic tests for the video compitablity on different mobile browsers. So the goal of our test is to find out which video format could be played in which browsers, or which major versions of the browsers.

Our Test

We need to emphasis something before going into the test.

  1. All the browsers in the test are on mobile phones. They are not desktop versions of the browsers.
  2. We only tested on android and iphones. Browsers for Windows Phone, Blackberry and Palm WebOS are not tested.
  3. All the tests are carried out in mobile phones. Well, yes, you can make a phone call using 7 inch Samsung Galaxy tablets if you don’t feel it’s too big. But the mobile phones used in this test are 3.0 to 4.8 inches for the screensize.
  4. Not all browsers, as well as a specific version of the browser, could be used in all different mobile devices. For example, there is no Opera Mobile browser on iPhone iOS 5. It is the same case for Firefox. But at the time of testing, we chose the latest version of the browser in that OS.
  5. We suppose that the server which hosts the video file is properly configured in order that the file could be properly delivered.

Finally, we have tried our best to keep the data correct on the phones we have tested. But it’s quite likely that some of the test results are not accurate. If you find anything that is not correct, please feel free to let me know. I would be glad to test it again. OK. Let’s go!

Test 1, Playable

This test shows if a video file with a certain codec could be played in a certain browser on a mobile phone. We test mp4, ogv and webm on Android 2.3, 4.0 and iOS 5. We designed a test page, which embeds mp4, ogg and Webm videos in one page. Then we open this page in different mobile browsers on different mobile OSs. Table 1,2 and 3 shows the results.

Table 1.HTM5 Video Compatibility in Android 2.3
Browser MP4, H.264 Ogg, Theora WebM, VP8
Opera Mobile 12.0 Yes No No
Opera Mini 7.0.29 No No No
Firefox 14.0.1 No Yes* Yes*
Android Native Browser Yes No No

*Unlike other browsers, the video will not enter full screen when playing, and there is no full screen control in the player in Firefox 14.0.1.

Test Phones for Table 1:

  1. HTC Design S, Android 2.3.5, 3.7-incn touch screen
  2. Sony SK17i, Android 2.3.4, 3.0-inch touch screen
  3. Samsung Galaxy S II, Android version 2.3.3, 4.3-inch touch screen
  4. HTC G10, Android 2.3.5, 4.3-incn touch screen

P.S. Google Chrome is not compatible with Android 2.3.

Table 2.HTM5 Video Compatibility in Android 4.0.4
Browser MP4, H.264 Ogg, Theora WebM, VP8
Opera Mobile 12.0 Yes No No
Opera Mini 7.0.29 No No No
Chrome 18.0 Yes No Yes
Firefox 14.0.1 No Yes Yes
Android Native Browser Yes No No

Test Phones for Table 2:

  1. Samsung Galaxy S III, 4.8-inch touch screen

Table 3.HTM5 Video Compatibility in iOS 5.1.1
Browser MP4, H.264 Ogg, Theora WebM, VP8
Safari 5 Yes No No
Chrome 21.0 Yes No No
Opera Mini 7.0.29 No No No

Test Phones for Table 3:

  1. iPhone 4S, 3.5 inches screen
  2. iPhone 4, 3.5 inches screen

As a summary, here are some interesting findings:

  1. There is no “killer” video codecing format for mobile browsers currently. But MP4 seems compatible with most “default” browsers, i.e. Android Native browser in Android phons and Safari in iPhones.
  2. Opera Mini is pretty disappointing as no video could be played.
  3. Different from desktop browsers (see this table), WebM is not well supported by the native players on mobile browsers. Interestingly, WebM is developed (or more actually, sponsored) by Google, but the Android Native Browser, which is also developed by Google, can’t play WebM
  4. Most mobile phones play the video in full screen mode by default and users cannot quit the full screen unless stopping the video. But Firefox is an exception. What’s more, if the screen size of the mobile phone is larger than 4 inches, The full screen, if screensize is bigger than 4.3 inches, sometimes, video won’t be played in full screen mode automatically.

WebVTT support in Mobile Browsers

HTML5 video tag not only brings video playing natively, but also adds some cool features alongside the video. One of them is the track tag for subtitles. Subtitles are very important for the accessiblity of videos on the Web. Many standards and de facto standards have been around for a long time. SubRip (SRT), Timed Text Markup Language and .sub, to name a few. I personally think the most promising one is Web Video Text Track (WebVTT). WebVTT is specially tailored for videos on the Web and you can also use it for audio description, chapter navigation, etc. Silvia Pfeiffer has given an very good presentation about WebVTT.

WebVTT is still a moving target and there are many things which need to be nailed before the first release. Except for the WebVTT specification itself, as developers, we are really care about the technical support of WebVTT in different browsers and are there any tools out there we can easily use? Silvia summarised the current situation of WebVTT support in different desktop browsers.

A further question we ask is that is there any mobile browsers which support WebVTT natively? After our test, the answer is NO! Table 4 is our test result. “N/A” means a certain format of the video file cannot be played in that browser, so it is meaning less to say if the WebVTT can be displayed or not.

Table 4.WebVTT Support in Different Mobile Browsers
OS Browser MP4, H.264 Ogg, Theora WebM, VP8
Android 2.3 Opera Mobile 12.0 No N/A N/A
Opera Mini 7.0.29 N/A N/A N/A
Firefox 14.0.1 N/A No No
Android Native Browser No N/A N/A
Android 4.0.4 Opera Mobile 12.0 No N/A N/A
Opera Mini 7.0.29 N/A N/A N/A
Chrome 18.0 No N/A No
Firefox 14.0.1 N/A No No
Android Native Browser No N/A N/A
iPhone iOS 5 Safari 5 No N/A N/A
Chrome 21.0 No N/A N/A
Opera Mini 7.0.29 N/A N/A N/A


Of course, there are many HTML5 video players on the Web, VideoJS, PopcornJS, MediaEleemntJS, JWPlayer, Kaltura Player, etc. Some of indeed support WebVTT on desktop browsers. But they are all “polyfills”, which means the support is not native and they use javascript and CSS to somehow present WebVTT together with the video. We did test MediaElementJS on iphones, but unfortunately, it still failed to display the subtitle. However, MediaElementJS can sucessfuly display WebVTT on iPad.

Conclusions and Future Directions

The test for HTML5 video tag and WebVTT on mobile browsers is important. Developers should be clear what video could be played in the target device. On the server side, the web applications need to host the best format that compitable with the target device. Video sharing services, such as YouTube, must be adaptive enough to deliver videos to different devices and browsers. Subtitles are always important for videos, especially on mobile platforms, where the support for subtitle is not thorough yet.

With each updates or release of new versions of browsers, new codecs might be supported and old formats might be abandoned. WebVTT is currently is not well supported on mobile browsers and we are still waiting for some break-through.

The tests tell us the HTML5 video support is on the way. In the tests above, we are trying to keep things easy, i.e. we didn’t bring in a lot of variables and we just used the most popular phones and most popular browsers. However, the real world is not that simple. Between mobile phones and desktop machine, we have got tablets, 7 inches to 10 inches. The screensize of mobile phones are getting bigger and bigger. I am very curious on how different browser kernels choose the display mode for these screensizes. Is there a borderline or threshold? So in the future, it might be necessary to compare the HTML5 video tag in a single browser across different size of devices (phones and tablets). We are also expecting more documents could be released or discussed regarding this aspect.

Again, if you find anything wrong or anything new, please feel free to leave your comments.”

Synote mobile phone testing

Synote mobile meeting

Testing with the mobile phone  version of Synote is proving exasperating!  The different devices, operating systems and browsers all produce different results despite the fact that the pages have been designed in HTML 5 with media element js player and jQuery mobile.  The transcript, synmarks and the PowerPoint slides all appear to display in the same way on the various browsers and devices.

 BUT …

Issues arising with videos and the media element js player have caused several headaches.  The way YouTube videos are presented  on iOS 5 (iPhone) where the controls work but the video is launched in the iOS player  and Android where there are variations in the software used on different phones e.g. some HTC and Sony phones.   On the latter the video is seen but cannot be played using an Opera browser but will play in the built in Android webkit browser – on the former an error message appears within the Chrome browser as it cannot load the player.  There is no mobile Firefox for HTC Wildfire.

The HTC OneXL with a 4 inch will run  Synote Mobile  in the same way as the tablet and desktop version.

Audio is not a problem as the transcript can appear below the player in this case.  Synmarks can also be seen with a separate tab.

Planning ahead

whiteboard designThe view of the video page will have titles, tags and description – the options page will allow the user to go to the video or audio page, transcript, slides or synmarks.  The transcript has the thumbnail picture from  the video and the start and end times for each transcript block.   The slides can be displayed in a row or line with start times and actual slides, the synmarks are listed with title, description and tags plus start and end time and a thumbnail of the YouTube video for that time.

At present there is also a huge variation between the way mobile phones show the captions as taken from the transcript (as seen in the tablet version) because the players (whether built or in the browser) react differently to the selection of the caption button.   This is a testing phase and we are trying to see if there is anyway to overcome this issue.   If you use a Flash player on the HTC Wildfire it will display the captions  but this does not help us with HTML5! At least we know there is a fall back player that will cope with closed captioning on Android

Testing with the iPhone – it did not matter whether we used Chrome, Opera or Safari the player once launched just would not play the YouTube closed captions despite having closed caption settings on.  This appears to be a known problem as mentioned in the blog “YouTube – Apple’s Lack of Caption Support

Feedback on prototype Synote Mobile

comparing Galaxy and iPad presentation of Synote mobile

This meeting provided Yunjia with the first chance for a small group of users to provide feedback on the prototype of Synote Mobile using 7 and 9.7 inch tablets with Safari, Opera and Chrome browsers.

Yunjia is using CSS3 media query and viewing port size to decide when you are working with multimedia materials and how they will be displayed on devices – so it is hoped the user automatically experiences a comfortable presentation. In terms of Synote Mobile this means that when the viewing window is below 768 pixels the two columns that hold the transcript and synmarks (annotations) collapse into one. When a video or audio is played the synmarks will be on one tab with the closed captions allowing you to see the transcript across the window. The user can also choose just to read the transcript via that tab.

One issue that has been discovered by taking screen size as a method for changing presentation of videos and transcripts is that the CSS3 media query is dependent on screen size and videos are dependent on pixel widths. It is a tricky problem to explain as it appears that CSS media queries result in different behaviours for continuous media  and paged media.  There is also an inconsistency in behaviour across devices and browsers.

The controls are dependent on viewing modes, devices and browsers – so when using landscape mode on the iPad it senses that it is in desktop mode. When playing the video and viewing the transcript the player controls are always seen but when using Portrait mode the CSS media query senses the reduced width and represents the web page without the player controls as you scroll down. Yunjia says it is possible to solve the problem on some devices, but because this does not work for all devices it has been decided that ‘width’ is probably the best method for defining when the controls will be shown – Yunjia is using ‘Bootstrap’ from Twitter at present, which is considered the most consistent environment across all devices when it comes to presenting media data.

Synote Researcher website

When discussing other user issues such as the look and feel, the Synote Researcher website used as the basis for viewing recordings was considered to be easy to use and attractive but there were one or two login issues on the iPhone.

One user suggested that the highlights of synmarks (annotations) should be different from the transcript highlights as the video or audio plays – the example provided shows a YouTube video working with Synote Mobile.

Synote Mobile closed captionsIf there is a large chunk in the transcript when viewed on the video the caption will overlay too much of the picture. YouTube have set their automatic speech recognition captioning to always generate 2 lines – if the transcript is put in manually the size can be reduced to two lines for each timed section so it appears in a similar fashion but work is needed in this area to ensure this occurs in Synote mobile. It would be possible to edit the transcripts with an autosync system that divides longer sections into 80 character chunks that display as two lines. This cannot be done on the fly but would need to occur as part of the process in the database where the separate caption record is kept. This would not be necessary for audio as can be seen from the image as the caption can be displayed on a plain background.

The mobile phone version is still being adapted with single column viewing and the transcript appearing as captions – at present it has reached the viewing stage but not editing mode. A further meeting with the developer is planned on August 3rd, 2012