3.+Kangan+Institute

=//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:
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">the advent of tablets and phones that support HTML5
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">development of modern browsers that support HTML5
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">JavaScript libraries that make interactions <range type="comment" id="548656">easier to create
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">the perceived downfall of Flash
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Flash accessibility issues that are easier to solve with HTML and JavaScript
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">WCAG 2.0 AA requirements

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">During the trial the team researched common subtitling, video formats and methods required for HTML5 accessible video delivery incorporating subtitles.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">Subtitle formats: <span style="font-family: Arial,sans-serif; font-size: 10pt;">Video formats required: <span style="font-family: Arial,sans-serif; font-size: 10pt;">Video formats to consider:
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">WebVTT, for desktop browsers that already support HTML5
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">SRT, for Apple devices; iPad, iPod and iPhones. (Including QuickTime Player on the Mac)
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">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.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">MP4 (H.264), for most devices, browsers and Flash fall-back
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Webm, for all other devices
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">flv, f4v for Flash – <range type="comment" id="489915">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
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">OGG, this format was used for older versions of Firefox and could be considered for inclusion.

Implementation
<span style="font-family: Arial,sans-serif; font-size: 10pt;">Four devices were used during the trial*, these were:
 * <span style="font-family: Arial,Helvetica,sans-serif;">iPad 3
 * <span style="font-family: Arial,Helvetica,sans-serif;">iPod
 * <span style="font-family: Arial,Helvetica,sans-serif;">Android phone
 * <span style="font-family: Arial,Helvetica,sans-serif;">Android tablet

<span style="font-family: Arial,Helvetica,sans-serif;">All devices were connected to the Kangan Institute internal wireless network and ran well without log in or download problems.

<span style="font-family: Arial,Helvetica,sans-serif;">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 <range type="comment" id="115397">3, 4, 5 principle (used to establish a right angle) on a worksite.

<span style="font-family: Arial,Helvetica,sans-serif;">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
<span style="font-family: Arial,Helvetica,sans-serif;">Mobile devices were used in two quite different classes:
 * <span style="font-family: Arial,Helvetica,sans-serif;">A class of carpentry students (10 participants) where there was a lot of noise, students talking and some background construction noise.
 * <span style="font-family: Arial,Helvetica,sans-serif;">A class of CGEA CALD students (9 participants) in a normal classroom with very little noise.

<span style="font-family: Arial,Helvetica,sans-serif;">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.

<span style="font-family: Arial,Helvetica,sans-serif;">Some devices, the iPad and iPod, had the subtitles turned off by default; the Android devices had the subtitles turned on by default.

<span style="font-family: Arial,Helvetica,sans-serif;">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, <range type="comment" id="977692">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 <range type="comment" id="441246">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**
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">The number of devices available that play HTML based video which have subtitles attached (or not)
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">The number of devices that students and teachers have in their pockets that can access learning resources of any kind
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">The relative ease of incorporating video in a web page
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Identification of current best practices for creating and inserting subtitles
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Access to video on any device, not just devices that have Flash capability
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Access to subtitles on any device
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">More accessible video that helps to meet current WCAG 2.0 AA standards
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Devices easily connecting to the wireless network


 * Negatives**
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Students not realising subtitles are available due to caption button not being clearly visible or recognised by the user.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Students and teachers not taking into account the ‘computers’ (mobile devices) that could be used for learning.

Strategies to enable use of the technology
<span style="font-family: Arial,sans-serif; font-size: 10pt;">To support the use of the findings of the trial:
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">an instruction manual <span style="font-family: Arial,sans-serif; font-size: 10pt;">has been created - download the manual from the ** Resources ** section below
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">a series of blog posts are available allowing comment, questions and update of content over time
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Videos of some of the development processes have been made available on YouTube

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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
<span style="font-family: Arial,sans-serif; font-size: 10pt;">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?”

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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.

//<span style="font-family: Arial,sans-serif; font-size: 10pt;">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
<span style="font-family: Arial,Helvetica,sans-serif;">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:
 * <span style="font-family: Arial,Helvetica,sans-serif;">Colour
 * <span style="font-family: Arial,Helvetica,sans-serif;">Background colour
 * <span style="font-family: Arial,Helvetica,sans-serif;">Position
 * <span style="font-family: Arial,Helvetica,sans-serif;">Size
 * <span style="font-family: Arial,Helvetica,sans-serif;">Font

<span style="font-family: Arial,Helvetica,sans-serif;">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
<span style="font-family: Arial,sans-serif; font-size: 10pt;">This trial shows that
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">videos and subtitles work as hoped
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">HTML5 standards can be met
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">JavaScript is currently required to enable subtitles
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">the JavaScript based video player is keyboard accessible

<span style="font-family: Arial,sans-serif; font-size: 10pt;">A logical next step would be to further develop the video player to make it completely accessible to all users as:
 * //<span style="font-family: Arial,sans-serif; font-size: 10pt;">Extending the results of this project //**
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">The JavaScript based video player required to play subtitles is not screen reader accessible
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">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.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Subtitles cannot be enlarged, have the text or background coloured differently. People with colour blindness issues may be disadvantaged.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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
<span style="font-family: Arial,sans-serif; font-size: 10pt;">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.


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Carpentry student quotes: **


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Question **<span style="font-family: Arial,sans-serif; font-size: 10pt;">: Would you like it if video were available in class for you to review when you had a question?
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Student **<span style="font-family: Arial,sans-serif; font-size: 10pt;">: “I prefer hands on example, I like to be shown”


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Continuing discussion of question between students **<span style="font-family: Arial,sans-serif; font-size: 10pt;">: “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”.


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Question **<span style="font-family: Arial,sans-serif; font-size: 10pt;">: Would you use video if there was a device or computer available for the students to use.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Teacher **<span style="font-family: Arial,sans-serif; font-size: 10pt;">: “Yeah, probably. It has to be easy for them to get to. Could you give them a link to it on the student portal.”
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Me **<span style="font-family: Arial,sans-serif; font-size: 10pt;">: 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.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">[To students] **<span style="font-family: Arial,sans-serif; font-size: 10pt;"> How many of you have a Smartphone, Apple or Android. Ok so that’s everyone.
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">[To teacher] **<span style="font-family: Arial,sans-serif; font-size: 10pt;"> 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.”
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Teacher **<span style="font-family: Arial,sans-serif; font-size: 10pt;">: “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.”


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">ESL student comments: **


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Student: **<span style="font-family: Arial,sans-serif; font-size: 10pt;"> “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”


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Student: **<span style="font-family: Arial,sans-serif; font-size: 10pt;"> “The text makes it better because I can read what they are saying; sometimes people speak to fast for me to understand.”


 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Results of survey. **

<span style="font-family: Arial,sans-serif; font-size: 10pt;">Students generally found it easy to access the video on all devices.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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”

<span style="font-family: Arial,sans-serif; font-size: 10pt;">If videos were available for their class students said that they were likely to tell others about it.

<span style="font-family: Arial,sans-serif; font-size: 10pt;">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

<span style="font-family: Arial,sans-serif; font-size: 10pt;">The accompanying<range type="comment" id="512071"> information and instruction manual //Incorporating <range type="comment" id="902469">video into an HTML5 based website// can be downloaded here in
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">Word (378 KB)
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">PDF (1 MB)
 * <span style="font-family: Arial,sans-serif; font-size: 10pt;">RTF (926 KB)

Complete subtitles in the different formats are available here:
 * subs.vtt
 * subs.srt
 * subs.xml

<span style="font-family: Arial,sans-serif; font-size: 10pt;">The <range type="comment" id="536331">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:


 * Use Firefogg to convert files to the WebM format: @http://www.youtube.com/watch?v=UyhXlLIV1vY
 * Use Handbrake to convert video to MP4 format: @http://www.youtube.com/watch?v=IJqLwRoZy1A
 * Create a Flash based video player: @http://www.youtube.com/watch?v=CnZTkKaEIRI
 * Add subtitles to the Flash video player: @http://www.youtube.com/watch?v=HcG3L1P149U

=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 <span style="font-family: 'Arial','sans-serif'; font-size: 13.3333px;">Email: flag_enquiries@natese.gov.au Website: [|flexiblelearning.net.au]

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