edShare@GCU

Karadaglic, Dejan

Rice, Kenneth

edShare@GCU (Glasgow Caledonian University)

Control_and_instrumentation_w1

A short guide to adding accessible captions to your video files on edShare

Kelt, Marion

Hanning, Toby

Using an HTML5 player to add closed captions to video files 
 
Last updated: Monday, 17 September 2018 Page 1 
 
These instructions explain how to build your player and how to embed your player in GCULearn.  
To download one of the HTML files from edShare (https://edshare.gcu.ac.uk/id/eprint/1197) right 
click the View link, select Save Link As, and save the file to your computer. You can edit HTML files 
using a standard text editor such as TextPad or Notepad. 
 
The file looks like this: 
<!DOCTYPE html> 
<html> 
<body> 
<video width="350" controls> 
<source src="https://edshare.gcu.ac.uk/1038/1.hasvideo_mp4ThumbnailVersion/" 
type="video/mp4"> 
<source src="https://edshare.gcu.ac.uk/1038/1.hasvideo_webmThumbnailVersion/" 
type="video/webm"> 
<source src="https://edshare.gcu.ac.uk/1038/1.hasvideo_oggThumbnailVersion/" 
type="video/ogg"> 
Your browser does not support HTML5 video. 
</video> 
</body> 
</html> 
Using an HTML5 player to add closed captions to video files 
 
Last updated: Monday, 17 September 2018 Page 2 
 
If you have any queries or need help building a player please contact the edShare team 
(edshare@gcu.ac.uk). 
Once you have created an HTML5 player for your audio or video resource there are a number of 
additional features you can apply to your resource. These include: 
• Autoplay - specifies that the resource will start playing as soon as it is ready 
• Controls - specifies that controls should be displayed (such as a play/pause button)  
• Loop - specifies that the resource  will start over again, every time it is finished 
• Muted - specifies that the audio output of the resource should be muted 
These attributes are disabled by default; adding them to the audio/video tag will enable them. Full 
lists of HTML5 attributes are available via the following links: 
• Audio attributes -  http://www.w3schools.com/tags/tag_audio.asp  
• Video attributes -  http://www.w3schools.com/tags/tag_video.asp  
• Global attributes -  http://www.w3schools.com/tags/ref_standardattributes.asp  
For assistance using any of these attributes please contact the edShare team. 
Creating an HTML5 player also allows you to add subtitles or closed captions to a video. To add 
closed captions you must create a Web Video Text Tracks (WebVTT) file which contains the text 
track for your video and associated timings. You can then reference this file in your HTML5 player 
using a track tag. This is the best method of captioning your videos as it is accessible to screen 
reading software. 
 Create your WebVTT file. You can either convert an existing transcript to WebVTT format or 
create a new file and manually add captions. The following site provides tools which can 
make this process quick and easy: http://www.vttcaptions.com/the-caption-generator.html 
It should look like this: 
WEBVTT 
 
00:00:19.901 --> 00:00:24.500 
See that our senses sometimes deceive us, 
 
00:00:24.700 --> 00:00:28.876 
I was willing to suppose that nothing existed. 
 
00:00:40.076 --> 00:00:45.247 
Some men err in reasoning even on the simplest matters of geometry, 
 
00:00:45.447 --> 00:00:50.522 
although I was convinced that I was as open to error as any other. 
 
00:00:56.981 --> 00:01:01.710 
All thoughts that had ever entered into my mind when awake, 
 
00:01:01.910 --> 00:01:07.075 
had in them no more truth than the illusions of my dreams. 
 
00:01:20.790 --> 00:01:25.020 
As I observed this truth, I think, therefore I am. 
Using an HTML5 player to add closed captions to video files 
 
Last updated: Monday, 17 September 2018 Page 3 
 
 
00:01:25.763 --> 00:01:29.495 
I concluded that I might accept it as the first principle 
 
00:01:29.505 --> 00:01:33.218 
of the philosophy of which I was in search. 
  
 Ensure you save your WebVTT file with UTF-8 character encoding 
 
 Upload your WebVTT file alongside your video in edShare. We recommend giving your file a 
simple name like Video.vtt 
 
 Obtain the document URL for your WebVTT file in edShare. This is the link you will reference 
in your HTML5 player. To obtain this link select the WebVTT file, right click the Download 
button and select Copy Link Address. The link will usually take the form: 
https://edshare.gcu.ac.uk/id/document/xxxx  
Using an HTML5 player to add closed captions to video files 
 
Last updated: Monday, 17 September 2018 Page 4 
 
 Add a track tag to your HTML5 player. The track tag is contained within the video tag and 
takes the form: <track kind="captions" src="" label="English"></track>  
Add the document URL for your WebVTT file to the src attribute of the track tag e.g.  
 <track kind="captions" src=http://edshare.gcu.ac.uk/id/document/5332” 
label="English"></track> 
Full details of additional HTML5  attributes available for the track tag can be accessed here: 
http://www.w3schools.com/tags/tag_track.asp  
 Upload your HTML5 player alongside your video and WebVTT file in edShare. When viewing 
the player you will now see a button which can be used to switch your closed captions on 
and off . 
 


Using an HTML5 Player to add Closed Captions to Video Files.

Raw Data pertaining to the PLOS One Publication - The appeal of the Functional Fitness MOT to older adults and health professionals in an outpatient setting: a mixed-method feasibility study. Lex D. de Jong, Andy Peters, Sheena Gawler, Nina Chalmers, Claire Henderson, Julie Hooper, Robert M.E. Laventure, Laura McLean, Dawn A. Skelton

Skelton, Dawn

FFMOT Raw Data

Scott, Leonard

Algorithms: Insertion Sort

Data Structures and Algorithms - Analysis and Efficiency

Lightbody, Ruth

Democratic Challenges Lecture 10 The Future of Democracy

How to get the best from Google Scholar, use the advanced search, cite and save functions

Marshall, Heather

Google Scholar

An overview of the most common academic sources you will use as a student.  A brief criteria to help you assess the quality of information sources

Glasgow Caledonian University

Not a member yet

Control_and_instrumentation_w1

Using an HTML5 Player to add Closed Captions to Video Files.

FFMOT Raw Data

Algorithms: Insertion Sort

Data Structures and Algorithms - Analysis and Efficiency

Democratic Challenges Lecture 10 The Future of Democracy

Google Scholar

Types of Academic Sources

flow measurement part 3

Control and instrumentation_w6

Data sources:

652

7,745