Accessible Modern Video for All

Organisational overview


With more than 40,000 enrolments each year, Kangan Institute is a major training provider for the automotive, aerospace, health and nursing sectors and Indigenous education. We also have a strong presence in a range of industries such as fashion, business as well as justice and legal.

Our courses range from basic certificate to diploma and advanced diploma levels, with pathways to over 25 university degrees. We are a flexible, innovative and dynamic place of learning with a rich multicultural atmosphere.

Trial overview


Even though HTML5 is still a work in progress it is available on many mobile devices and modern browsers. This project tests the viability of using the HTML5 video tag as an alternative to proprietary plugins such as Flash, Sliverlight and QuickTime and how that video can be made more accessible to all users by providing subtitles.

The trial identified:
  • the video formats required for displaying video on a HTML5 based website
  • how to place video in a HTML5 based website
  • how to create subtitles
  • how to correctly format the subtitles
  • how subtitles should be incorporated.


Instructions on the steps and the general information needed to include video and subtitles into HTML5 are designed for ease of use and reading. There are:
  • video based examples (with subtitles)
  • step by step guides
  • background information
  • troubleshooting tips

A detailed recommended process can be downloaded from the Resources section below

The results of the project are designed to work on all browsers available at the time of writing, May 2012. The HTML5 video and subtitling information is presented in a way that is compliant with the current state of the specification*. This means that while some JavaScript is required to supply a solution that works in all situations JavaScript can be removed in the future when HTML5, and specifically the video tag, is supported more completely by browsers.

Note:* While the HTML5 specification can change it is not expected to and there is no information from Internet resources indicates that html based video information/incorporation will change.


Trialing the technology


Research


There are substantial changes taking place now on the Internet:
  • the advent of tablets and phones that support HTML5
  • development of modern browsers that support HTML5
  • JavaScript libraries that make interactions easier to create
  • the perceived downfall of Flash
  • Flash accessibility issues that are easier to solve with HTML and JavaScript
  • WCAG 2.0 AA requirements

The team working on this trial have researched information regarding all of the above or participated in creating interactive websites and materials over a number of years. While the project team have used Flash in the past as a development tool we have completely moved to a HTML and JavaScript based solution for resource development.

During the trial the team researched common subtitling, video formats and methods required for HTML5 accessible video delivery incorporating subtitles.

Currently there are three different subtitle formats and a minimum of two video formats that are required to make video accessible on HTML5 enabled browsers and mobile devices.

Subtitle formats:
  • WebVTT, for desktop browsers that already support HTML5
  • SRT, for Apple devices; iPad, iPod and iPhones. (Including QuickTime Player on the Mac)
  • TTXML, for Flash. Flash is used for a fall-back position for older browsers that don’t supportHTML5 and Android devices that currently have poor support for subtitles.
Video formats required:
  • MP4 (H.264), for most devices, browsers and Flash fall-back
  • Webm, for all other devices
Video formats to consider:
  • flv, f4v for Flash – though Flash can use a properly encoded MP4 (H.264) file. Flash can be used as a fallback for older browsers, such as IE6, that do not support HTML5 video
  • OGG, this format was used for older versions of Firefox and could be considered for inclusion.


Implementation


Four devices were used during the trial*, these were:
  • iPad 3
  • iPod
  • Android phone
  • Android tablet

All devices were connected to the Kangan Institute internal wireless network and ran well without log in or download problems.

The devices had a link to the webpage that contained the video for students to watch. The video was of a Kangan Institute building teacher demonstrating the 3, 4, 5 principle (used to establish a right angle) on a worksite.

Note:* during testing desktop PCs using Chrome, Internet Explorer 7, 8 and 9, Firefox 3.6, 4, 11 and 12, a Mac running Safari 5, Android devices, iPad, iPad 2 and iPad 3 were used.

Classroom trial/s


Mobile devices were used in two quite different classes:
  • A class of carpentry students (10 participants) where there was a lot of noise, students talking and some background construction noise.
  • A class of CGEA CALD students (9 participants) in a normal classroom with very little noise.

All students were introduced to the problem of accessible video and the purpose of the trial. They were asked to watch the video and to use the subtitle feature even though at times they could hear the video perfectly well.

Some devices, the iPad and iPod, had the subtitles turned off by default; the Android devices had the subtitles turned on by default.

The students were asked to provide feedback on 9 questions regarding ease of video and subtitle access, which device they were using and the importance of subtitles to them in general.

Implementing the technology/ies


Evaluating the technology/ies


Overall evalutation

We are satisfied with the current technology because:
  • it was easy to develop the html5
  • developing the subtitling was not as time consuming as expected
  • it was easy to use on the mobile devices
  • it received positive learner feedback.

During the test with the carpentry class a student comment was made that ‘having video in the workshop would be good but there are no computers to watch it on’. Everyone was asked if they had a smartphone such as an iPhone or Android phone that could view pages on the Internet, every student in the class including the teacher and trial team put their hand up.

The ESL students suggested that the best way to improve the video for them was to ask the presenter to slow down their speech. When asked if the subtitles helped them to understand the presenter they said “Yes the text helped a lot, I can read the text and that helps me to know what the person is saying.” When asked if the text was also to fast the answer was “No, I can read English better than I can understand what is being said.” These were common student statements. Another suggestion was that subtitles are provided in other languages, while this presents some significant development issues it may be more easily done in the future. See this video for Google’s current attempts at supplying subtitles in any language: http://www.youtube.com/watch?v=krq1msguNFo&t=15m09s Naomi Black’s presentation starts at 15:11. While the technology, as Google admits, is still basic it is a step in the right direction.

Devices that can view HTML5 based video or indeed web based learning resources in general are more likely to found in the classroom. A survey of 108 Melbourne University students (Redman and Trapani 2012) found that of 108 students surveyed 89.9% of them had a smartphone while others had an iPad, iPod or other multimedia compatible device as well or instead of a phone.
The technologies (mobile devices, browsers) available can support video and subtitles reasonably easily. Therefore the video and subtitling processes identified in this project could be made available immediately. The technologies met the requirements of the trial as they were able to:
  • show video
  • show subtitles
  • be developed in a way that is as future proof as possible
  • be developed in a way that means future editing needs only the removal of JavaScript from the web page and not editing of any HTML.

Currently modern web browsers support the video HTML tag but do not support the track tag. The track tag is used to supply subtitles but as browsers do not support it a JavaScript solution is required. As well iPhone and Android devices run the video directly in the device’s video application and ignore any JavaScript and subtitles.

Further evaluation of the technology

It is hoped in the future that mobile devices support the use of the track tag even when video is displayed in their native video player. There are expectations that browsers will eventually support the track tag appropriately without the need for a JavaScript ‘fix’.

It was noted during trialling that some students had difficulty finding the subtitles ‘on/off’ button. This was most common on the iPad and iPod as it is not possible to turn them on unless the video is played at fullscreen. It would be a good outcome if device manufacturers were willing to make this more easily accessible. When the subtitles ‘on/off’ button was more visible not all students recognised it for what it was. This made us realise that any subtitles provided should be accessed from a clearly labelled button or perhaps be turned on by default.

Continued use

The development team will continue to use the technologies associated with this trial. The positive outcomes outweigh perceived negatives for delivery to students by making the video accessible on all modern devices and accessible to students with hearing difficulties due to hearing loss or working in a noisy environment.

Subtitling was expected to take a significant amount of time and some subtitling tools trialled were very time consuming and inefficient. This project trialled a range of tools and found that the best subtitling tool identified by this project is the Universal Subtitles/Amara website http://www.universalsubtitles.org/en-gb/. Using this tool was at least 50% quicker than any of the other tools trialled and the instructions for use were significantly easier to understand and so the learning time required was also less.

Even though there are three subtitling formats required, this project identified the process to convert one subtitle format into the others needed easily and quickly.

Positives
  • The number of devices available that play HTML based video which have subtitles attached (or not)
  • The number of devices that students and teachers have in their pockets that can access learning resources of any kind
  • The relative ease of incorporating video in a web page
  • Identification of current best practices for creating and inserting subtitles
  • Access to video on any device, not just devices that have Flash capability
  • Access to subtitles on any device
  • More accessible video that helps to meet current WCAG 2.0 AA standards
  • Devices easily connecting to the wireless network

Negatives
  • Students not realising subtitles are available due to caption button not being clearly visible or recognised by the user.
  • Students and teachers not taking into account the ‘computers’ (mobile devices) that could be used for learning.

Strategies to enable use of the technology


To support the use of the findings of the trial:
  • an instruction manual has been created - download the manual from the Resources section below
  • a series of blog posts are available allowing comment, questions and update of content over time
  • Videos of some of the development processes have been made available on YouTube

Kangan Institute has a Blended Learning Support Team who update teachers with information such as the findings of this trial and help them implement it. This document and any training required will be made available to members of the Blended Learning Support Team.

Barriers to implementing the technology


Teachers and students would like to have video based resources similar to those trialled*. Teachers don’t see the point of going to the trouble of development as they don’t have computers in many of the classrooms where they teach. Conversely the students don’t ask for video, or other computer based resources perhaps because they know that there are no computers available in the classroom where they learn. This was evident from many discussions with teachers over a number of years and a general discussion with the students during trialling. “Where would we watch the video anyway?”

No one considered using any mobile device to access online resources. The barriers faced in the trial were not about setting up or using technology but were more about people’s perception of what education is, that using a mobile device in class is not allowed and that the training facility should provide everything needed. Turning off their device seemingly stops students from even thinking about using it for their education. Perhaps students don’t push teachers enough for online learning resources because they don’t think about accessing learning in this way during classes. Let’s not just leave handheld computers on but use them to empower students learning.

Note: *When students were asked whether they thought that the video was useful one comment was “No, I prefer to be shown how to do something, hands on.” Another student said that “It would be ok to have video but I would prefer to have the teacher show me something. But it would be cool to be able to go to a machine and scan a code on it and find out information about the machine. That could be video or something. That would be good.”

Additional considerations


While watching a presentation from Google and Adobe about their web accessibility strategies and video it was mentioned that providing subtitles alone do not fully meet accessibility requirements. It must also be possible for the user to change the subtitle’s:
  • Colour
  • Background colour
  • Position
  • Size
  • Font

Subtitles also must be descriptive of what is happening when there is no talking and include sounds that are occurring in the background etc.

Future directions


This trial shows that
  • videos and subtitles work as hoped
  • HTML5 standards can be met
  • JavaScript is currently required to enable subtitles
  • the JavaScript based video player is keyboard accessible

Extending the results of this project
A logical next step would be to further develop the video player to make it completely accessible to all users as:
  • The JavaScript based video player required to play subtitles is not screen reader accessible
  • Subtitles cannot be moved, if there is an important part of the video that is covered by the subtitles the user will not see it.
  • Subtitles cannot be enlarged, have the text or background coloured differently. People with colour blindness issues may be disadvantaged.

The second area in which this project could be extended is in developing the level of detail in the subtitles, what is happening in the video (closed captions - Who is speaking? What sounds are occurring that are important to note).

Additional materials


Learner feedback


During trials only mobile devices were used iPad, iPod, Android Tablet and Android Phone (both Samsung). Students did not have any trouble using the devices at all. They only needed to be shown the link to the video.

Carpentry student quotes:

Question: Would you like it if video were available in class for you to review when you had a question?
Student: “I prefer hands on example, I like to be shown”

Continuing discussion of question between students: “I don’t know if it would be that great, but if there was a way where you have a machine and you could walk up to the machine and there was information about it that would be really good.” “You could have a scanner thing on it” “ A QR code” “yep that would be pretty good”.

Question: Would you use video if there was a device or computer available for the students to use.
Teacher: “Yeah, probably. It has to be easy for them to get to. Could you give them a link to it on the student portal.”
Me: Yes you could do that, but [the student] over there just asked for the web address where this video was and gave up after I said ‘www.kangan.edu.au’ so if they have to type in an address to get to the link that might put them off.
[To students] How many of you have a Smartphone, Apple or Android. Ok so that’s everyone.
[To teacher] So everyone could type in an address or download a free app that could scan a picture and send them to the video without having to type anything.”
Teacher: “That sounds alright, when I am down here permanently I want to put a lot of my resources up into Moodle so if they could get the stuff that would be good.”

ESL student comments:

Student: “It would be good to be able to slow the video down, that would make the person presenting easier to understand.” Me: “Do you think the subtitles, text at the bottom makes it easier to understand?” Student: “Yes but being able to slow the video down would be good”

Student: “The text makes it better because I can read what they are saying; sometimes people speak to fast for me to understand.”

Results of survey.

Students generally found it easy to access the video on all devices.

They felt that the subtitles were easy to read on the iPad and iPod but were slightly less easy to read on Android devices that used a Flash option. The Flash option didn’t have a black background underneath the text as the iPad does. One student commented on this saying this “would make the subtitles easier to read”. The Flash subtitles were trialled using white text with a subtle black drop shadow or outline.

Students found it difficult at times to turn subtitles on and off. This could be for a few reasons including not recognising the button symbol for subtitles and the iPad and iPod not showing the caption button until the video is run at full screen.

Subtitles were rated as “Good to have” with 3 saying they “Were not needed at all” in general. When the question was posed in the context of a noisy workshop all said that the subtitles were “Good to have” or “Very important”

If videos were available for their class students said that they were likely to tell others about it.

When asked if they would look for subtitles again answers were evenly split between ‘No’ and ‘Maybe’ for the carpentry students and ‘Yes’ and ‘Maybe’ for the ESL students.


Resources


See the completed video resource that was used in the trials: http://www.kangan.edu.au/lrd/emergtech2012/html5video.htm

The accompanying information and instruction manual Incorporating video into an HTML5 based website can be downloaded here in

Complete subtitles in the different formats are available here:

The manual is also available online in a blog post format where you can leave comments and any updates we find can be posted.

http://ldki.blogspot.com.au/

Links to the videos contained in the instruction manual:



For more information


Paula McKenry, Project Manager - pmckenry@kangan.edu.au
Sean Norrey, Technical Officer - snorrey@kangan.edu.au

Strategy contact information


For general enquiries about the National VET E-learning Strategy, please contact:
Secretariat of the Flexible Learning Advisory Group
+61 (0)3 9954 2700
Email: flag_enquiries@natese.gov.au Website: flexiblelearning.net.au

New Generation Technologies for Learning
incorporating E-standards for Training
Email: e-standards@flexiblelearning.net.au
Website: e-standards.flexiblelearning.net.au