20
12
Incorporating video into
an HTML5
based website
Kangan Institute
-
Learning Development
Report p
roduced by Kangan Institute
–
Learning Development June 2012
INCORPORATING VIDEO
INTO AN HTML5 BASED
WEBSITE.
................................
.....
2
W
HAT IS THIS PROJECT
ABOUT
................................
................................
...........................
2
W
HAT IS
HTML
AND
HTML5?
................................
................................
.........................
2
I
S
HTML5
WIDELY SUPPORTED
?
................................
................................
........................
3
W
ATCHING VIDEO ON THE
WEB
................................
................................
.........................
3
H
OW TO PUT VIDEO ON M
Y
HTML5
WEBPAGE
................................
................................
....
4
Video formats
................................
................................
................................
.........
4
How to create a basic HTML5 web
page
................................
................................
5
Create the video tag and link the video
................................
................................
.
5
How to create HTML5 encoded video
................................
................................
....
5
Video doesn’t work
................................
................................
................................
8
The video did work, so what is it doing?
................................
................................
9
F
ALL BACK TO
F
LASH
................................
................................
................................
........
9
How to create your own Flash video player
................................
.........................
10
Insert the Flash video fall back for IE 6/7/8
................................
.........................
13
CREATING SUBTITLES F
OR HTML5 VIDEO
................................
..............................
14
C
URRENT
HTML5
SUBTITLE SUPPORT
................................
................................
...............
14
B
ROWSER AND DEVICE SU
BTITLE REQUIREMENTS
................................
................................
15
S
UBTITLE SOFTWARE
................................
................................
................................
......
15
S
UBTITLE CREATION PRO
CESS
................................
................................
..........................
17
LINK SUBTITLES TO
VIDEO
................................
................................
.....................
20
E
MBED SUBTITLES USING
HTML5
ONLY
................................
................................
............
22
M
AKING IT WORK NOW
................................
................................
................................
..
24
Making the <track> tag work in modern web browsers
................................
......
24
Downloading and using playr.js
................................
................................
...........
25
A Flash solution
................................
................................
................................
....
27
Making it work now, on an Android device
................................
.........................
30
Add the required JavaScript to the page
................................
..............................
30
Making it work now, on an Apple device
................................
.............................
33
It didn’t work on the iPad?
................................
................................
...................
35
CONCLUSION
................................
................................
................................
........
36
Report p
roduced by Kangan Institute
–
Learning Development June 2012
In
corporating video into an HTML5 based website.
What is this project about
This document has been developed as a result of a project undertaken by
Learning Development
that explored
different ways video
and subtitles
could
be incorporated into a HTML5
base
d website.
The video was first incorporated into the website, then tested on new and old
browsers and on mobile devices such as iPad, iPod, Android Phone and an
Android tablet. The testing was designed to ensure that video was visible and
usable in all new
and old browsers and did not lack accessibility features such
as subtitles.
T
his
document
will provide advice
and instructions
on
how to
incorporat
e
vi
deo into a HTML5 based website
.
It
will:
discuss
video formats required for HTML5 video
subtitle format
s and use in HTML5
identif
y
some compression software that may help produce video
in
the
right formats
*
It is also hoped that the advice and instructions will not be overly complex and
that only minor changes to the methods described in this document will
be
required once HTML5 specification is fully accepted
.
*Note: The document discusses compression
formats
but does not cover video compression
techniques
in great
detail.
What is HTML
and HTML
5?
HTML is
a code language which is used to develop webpages.
It is the code that
makes webpages look and act the way they do. For example, HTML coding will
tell the webpage what text colours to use, what to do when the user clicks
on
a
link
, when to play a video, or what happens when the user rolls the mouse
over a
n image.
HTML5 is the name given to the updated HTML standard.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Almost every web page on the i
nternet is made with, or incorporates, HTML
.
HTML was developed initially in 1990 by Tim Berners
-
Lee and was last updated
to its current standard
in 2000.
However
, since the introduction of mobile
devices there has been a need to adapt the current HTML standard to suit
these emerging technologies.
For example, HTML is now being upgraded to
include interactive features such as video and audio which can be viewed
wi
thout 3
rd
party plugins.
Although HTML5 is still in the process of developing, it is expected that HTML5
will soon replace current HTML technology and many developers and websites
are making the transition now.
Is HTML5 widely supported?
To add a video
into an HTML5 webpage, the tag <video>is added to the coding.
All new browsers
support the <video> tag and
some or most of
the
recommended
HTML5 features.
However, as HTML5 is currently under development it may be necessary to
provide multiple video forma
ts to be sure that the video will display in both old
and new
browsers (
required video formats are discussed in the section
Video
Formats
).
To see how well your browser supports HTML5 visit
http://html5test.com/
.
Wat
ching v
ideo on the web
The current HTML standard
doesn’t support
video being played directly from
webpages. Therefore, i
n order to view videos attached to webpages
,
the
user
is required to
download
3
rd
party plugins such as
Flash
or
QuickTime
.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
As
3
rd
part
y plugins, such as Flash,
can drain the battery of mobile devices and
affect performance overall, both Apple and Microsoft have made the decision
to support the development of HTML5 as a way of replaci
ng the need to
download plugins
*
.
In addition
to this
A
dobe
,
the developer of the
Flash
player,
have announced that it will no longer update its mobile
Flash
player
and that it fully supports the proposed HTML5 standard
.
*
See Steve Jobs
’ article
‘
Thoughts
on
Flash
’
http://www.apple.com/hotnews/thoughts
-
on
-
Flash
/
.
How to put video on my HTML5 webpage
Video formats
Currently
, as of April 2012,
HTML5 has not confirmed which video formats will
be supported. In the meantime, to make sure all users of
a site can see the
video on any comp
uter or mobile device,
videos should be supplied in multiple
formats. For example, t
he formats that
must
be offered
at a minimum
are:
MP4
(H.264)
WebM
OGG was used by earlier versions of
Firefox
and
should be
considered
as
a format
still
worth supplying
How HTML5 works with multiple formats
The HTML5 <video> tag works using a fall back method. This means that a
browser that cannot view one video format will fall back to using the next in
the queue. If the browser still
does not understand the video format it can
keep looking through the <video> tag for more information or a f
ormat that it
does understand.
Some very old browsers don’t support the HTML5 video tag at all. In this case
a
nother format that can be offered is
the FLV file
type
.
Flash
also supports the
Report p
roduced by Kangan Institute
–
Learning Development June 2012
MP4 video codec so it is not overly important to supply the FLV format type
as
well
.
The MP4 video must be H.264 encoded to work with a
Flash
video player.
How to c
reate a basic HTML5 webpage
The only tags requir
ed to make a HTML5 web page are listed below.
All other
HTML tags fit within this structure, normally within the body tag. The
HTML5
<
video
>
tag is
also included in the body tag.
<!DOCTYPE html>
<html>
<head>
<title>My HTML5 Page</title>
</head>
<body>
<p>Webpage content such as text, images and video
go here</p>
</body>
</html
Create the video tag and link the video
Before adding an HTML5 encoded video into a webpage, video
s will need to be
HTML5 encoded and a link added to the
video on the HTML5 webpage.
The following section
s
will provide instructions on:
creating an HTML5 encoded video
creating an entire HTML5 web page
that includes a link to a video.
How to create HTML5 encoded video
Step 1
I.
Choose a video to add to the page
.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
II.
Rename the
file to something simple (
for
this example
the
video will be
referred to as
html5videoex
).
III.
C
onvert this file into 2 different formats, so you will have two video files
created from the original source file
html5videoex
:
html5videoex
.
mp4
htm
l5videoex
.
webm
Creating a
WebM
Video
To convert video files to
WebM
format
,
try any of the software found here
:
http://www.webmproject.org/tools/#non
-
commercial
-
webm
-
tools
*
N
OTE*
The software in this site contains some
tools
which
are web based and are therefore not tied to a single
computer operating system
.
After testing software, the results in t
his project
show that
Firefogg
is a
suitable tool.
http://firefogg.org
A video example of using Firefogg
to convert files to the WebM
format
can be
found here:
http://www.youtube.com/watch?v=UyhXlLIV1vY
Creating a
MP4
video
The results f
rom this project show that
Handbrake
*
(or any other MP4
convertor including iTunes and QuickTime)
is a useful tool for creating an MP4
video. Handbrake is available on Mac OSX and Windows and is free.
NOTE*
: In some applications (ie Handbrake) there is an
option to choose the
format
of the final file type. In
this case
MP4 should be selected
and
H.264
should be selected from the
video codec
section. These are the
default options in Handbrake but may not be in other software.
http://handbrake.fr/
A video example of using Handbrake to convert video to the MP4 (H.264)
format can be found here:
Report p
roduced by Kangan Institute
–
Learning Development June 2012
http://www.youtube.com/watch?v=IJqLwRoZy1A
Step 2
This step involves s
etting up a website folder where videos can be stored along
with all other media and documents for the webpage.
Create a folder named
‘website’
to store the videos and any webpages
etc.
Place the formatted videos
html5videoex
.mp4
and
html5videoex
.webm
i
nto the ‘website’ folder
Step 3
This step involves c
reat
ing
a web page in your favourite development software
or text editor.
Use the HTML
mark
-
up
below
to make a valid HTML5 web page.
<!DOCTYPE html>
<html>
<head>
<title>My HTML5
Video
Page</
title>
</head>
<body>
</body>
</html>
Save
the
file as
html
5video.htm
into the
‘website’
folder where you
stored the correctly formatted video.
In the
‘website’
folder you should now have:
I.
html5video.htm
II.
html5videoex
.webm
III.
html5videoex
.mp4
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Step
4
This step involves adding the video to the webpage.
Open the
html5video.htm file
P
lace th
e
HTML
mark
-
up
*
below,
between the opening and closing
body tags:
NOTE*
Always put the MP4 video first. Some Apple devices at the time of writing only process the
first
source tag. If the MP4 is at the bottom of the list it may not play in iOS devices such as iPad.
<body>
<video width="
640
" height="
360
" controls="controls">
<source src="
html5videoex
.mp4" type="video/mp4" />
<source src="
html5vi
deoex
.webm" type="video/webm" />
Your browser does not support video, please take this
opportunity to download a new browser.
</video>
</body>
Save the changes
made
to the html5video.htm file and open it in a
browser
.*
NOTE*
If your video looks distorted
adjust the width and height attributes in the video tag to your video
dimension
s
.
Video doesn’t work
If the video doesn’t work, check
all of
the following:
the file path to the video is incorrect (Check the file path and amend if
needed)
review the HTML m
ark
-
up coding for inconsistencies
if you see the “
your browser does not support video…”
text you are using
an older browser that needs to be upgraded (instructions on how to
Report p
roduced by Kangan Institute
–
Learning Development June 2012
supply video to older browsers will be provided
in the
following
section
s)
.
If you
are testing your work on the internet and find that the video
works fine when tested locally but not when run on the server (internet)
it is likely that the mime.types file on the server will need to be updated.
Either add, or ask the web administrator to
add this information to the
mime.types file:
video/mp4
mp4 mp4v mpg4 m4v
video/mpeg
mpeg mpg mpe m1v m2v
video/ogg
ogv ogg
video/quicktime
qt mov
video/webm
webm
The video did work, so what is it doing?
Firstly the browser d
etects the
<
video
>
tag and
then
looks for the
<
source
>
tag
. The
<
source
>
tag
tells the browser where to find the video. If the browser
does
not know how to
process the
first
video, in this case
the MP4 video file
,
it
will move o
n to the
second
<
source
>
tag
and use that.
Some older browsers may not
understand the <video> tag
at all so the movie
won’t work despite there being several sources. In this case there is the option
to fall back to flash. This is discussed in the following section.
Fall back to
Flas
h
Currently
Internet Explorer 6/7/8 ha
ve
24% of the browser market and
do
not
support the
HTML
5
video tag at all.
In this case, some users who are using one
of these browsers may not be able to access the video content at all.
In this
Report p
roduced by Kangan Institute
–
Learning Development June 2012
case a fall back to
F
lash
Player
is required
, as it
will more than likely be
installed on most computers.
To create the fall back to
Flash
, a
Flash
video
player which supports subtitles and provides helpful advice on how to
incorporate them
is needed.
If it isn’t possible to
find a Flash
video
player that supports subtitles
,
it is
possible to create
one that does. First
the creation of
a standard Flash based
video player
will be demonstrated
and later attaching subtitles
to it
will be
discussed.
How to
cre
ate your own
Flash
v
ideo player
This link provides instructions on
how to create a
Flash
video player:
http://www.youtube.com/watch?v=CnZTkKaEIRI
The steps below are a guide to creating a
Flash
video player
.
Steps
Co
mments
Open
Adobe
Flash
and
create a
new file
.
The information in this table works on
Flash
CS versions 3 and above
.
Save the file as videoplayer.fla
into the
‘
website’
f潬T敲e睨敲w
瑨攠䡔䵌H 牥慤礠癩v敯猠慲攠
獴s牥r.
坨敮 瑨楳瑥i 楳ic潭o汥l攠瑨e
webs
ite
folder should contain:
videoplayer.fla
html5videoex
.mp4
html5videoex
.webm
html5video.htm
Resize
the
Flash
document
to
the dimensions of the video.
Usin
g Finder (on the Mac)
or
My Computer
on Windows
:
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Add 40 pixels to the height of
the
Flash
document to make
room for the video controls
added later.
A.
S
elect the video,
from
information
that shows the video dimensions.
or
B.
O
pen the video in an application s
uch
as
QuickTime
. In
QuickTime
o
pen the
Movie Inspector
window.
C.
In
VLC
from the menu
and
select:
To
ols
>
Media Information
>
Codec
Open the ‘
Components’
睩nT潷
晲潭o瑨攠
瑯瀠
m敮u
楮
Flash
.
Select
Window
>
Components
From the Components window
choose
Video.
From the Video options choose
FLVPlayback
click,
drag
and
release
this onto the document.
Clo
se the ‘Component’ window
.
卥琠瑨攠T業en獩sns
(U敩杨琠慮T
睩T瑨)
潦 瑨攠䙌噐污lb慣欠
c潭o潮敮W
Ⱐ瑯
瑨攠獡浥
T業敮獩sn猠慳s瑨攠癩摥漮
卥汥S琠瑨攠䙌噐污l
bac欠c潭o潮敮W b礠
c汩捫楮i 潮o瑨e
癩摥漠
潢橥o琠潮o瑨e
T潣om敮琬
not
the one that is in the
component win
dow
. Once selected
height
and width opt
ions are made available in the
P
roperties
panel.
Position the FLVPlayback
component so that its top left
corner sits in the top left corner
of the document.
Or, select the FLVPlayback component by
clicking on the
vid
eo
object on the
document and set
ting the X and Y values in
the
P
roperties
panel both to 0.
Open the ‘
Component
Select
Window
>
Components Inspector
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Inspector’
睩nTo眠晲潭o瑨攠瑯瀠
m敮u.
卥汥S琠瑨攠䙌噐污祢ac欠
c潭o潮敮W
.
卥汥S琠瑨攠䙌噐污祢ac欠c潭o潮敮W b
礠
c汩捫楮i 潮o瑨e 癩摥漠潢橥c琠潮o瑨e
T潣om敮W
䙲潭o瑨攠
‘Component
Inspector’
睩nTo眠wh潯獥s
‘skin’
.
‘skin’ refers to the controls of the video
p污祥爠
–
p污礬l獴spⰠp慵獥s整c.
卣牯S氠To睮w瑨攠汩l琠潦 潰瑩潮猠
慮T cU潯獥s
SkinUnderPlayStopSeekCaption
Vol
Th
is places the controls under the video.
The ‘skin’ will have play, stop, seek, caption
慮T 癯汵l攠c潮瑲潬o.
C汩捫 O䬮
䙲潭o瑨攠
‘Component
Inspector’
睩nTo眠wh潯獥s
‘source’.
卯u牣r 楳⁵獥s 瑯整 瑨攠汩湫Ⱐ潲 p慴a, 瑯⁴h攠
癩摥漮
卥汥S琠
Browse
and locat
e the
MP4 video
created earlier.
The video
player being constructed should
be in the same folder (website) as the
HTML5 videos prepared earlier. Therefore
the MP4 video should be visible when
Browse
is selected.
Click OK.
Save the changes that have been
made.
Press Ctrl
-
Enter on a PC or
Command
-
Return on a Mac to
publish your video.
The video should display in a
Flash
window.
Troubleshooting
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Video not working:
C
heck the
‘
獯u牣r
’
楳i獥琠c潲牥r瑬礠楮i
瑨攠
Component Inspector
Make sure that the MP4 video
has
been encoded with H.264. Use
H
andbrake to re
-
encode if necessary.
Done
The website folder should now contain
these files:
videoplayer.fla
videoplayer.swf
SkinUnderPlayStopSeekCaptionVol
.sw
f
html5videoex
.mp4
html5videoex
.webm
html5video.htm
You are
now ready to insert the
Flash
video fall back into your HTML5
webpage.
Insert
the
Flash
video fall back for IE 6/7/8
The instructions below are a guide to inserting code for the
Flash
video fall
back into older browsers (IE 6,7,8).
Update your webpage,
html5video
.htm,
using the code below.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
<body>
<video width="
640
" height="
360
" controls="controls">
<source src="html5videoex.mp4" type="video/mp4" />
<source src="html5videoex.webm" type="video/webm" />
<object id="
f
lash
Content" type="application/x
-
shockwave
-
f
lash
"
data="
videoplayer.swf
" width="640" height="400">
<param name="movie" value="videoplayer.swf" />
<p>Download the
Flash
plugin from <a
href="http://www.adobe.com" title="Down
load
Flash
plugin">www.adobe.com</a></p>
</object>
</video>
</body>
Creating subtitles for HTML5 video
This section will discuss
current html5 subtitle support
browser and device subtitle requirements
subtitling software
techniques fo
r creating subtitles
Current HTML5 subtitle support
In the current proposed HTML5 standard the <video> tag contains a <track>
tag used for supplying a link to a subtitle file.
At the time of writing (April 2012) there is no support for providing subtitles
using the <track> tag
in HTML5 enabled websites displaying video.
While the
<track> tag remains unsupported by all current browsers a few developers
Report p
roduced by Kangan Institute
–
Learning Development June 2012
have created JavaScript libraries (JavaScript is code which makes web pages
very interactive) that add the
required functionality to the <track> tag.
The proposed
subtitling
format for
HTML5 video
is
WebVTT whic
h is based on
SubRip .SRT and there are JavaScript libraries available that support it.
WebVTT (.vtt) has a lot of support and will likely remain the f
ormat used for
subtitling HTML5 video into the future.
This is a positive outcome as it is
possible to demonstrate the correct way to create and incorporate subtitles
that work now and remain relevant when the HTML5 specification is
completed
.
Browser and
device subtitle requirements
While JavaScript libraries solve the problem of the lack of subtitle support in
modern HTML5 browsers it does not completely solve the problem for:
o
lder browsers using the
Flash
based fall back
m
obile devices (iOS and Android
*
), even though they have HTML5
enabled browsers installed.
To create subtitles that will wo
rk in all situations there need
s
to be
3
different
subtitle formats
provided. These formats are:
WebVTT (.vtt) for modern web browsers on a desktop or laptop
compute
r
SubRip
SRT (.srt) for use with iOS devices
XML (.xml) for
Flash
fall back and
an
Android solution.
I
t is possible to create the
SubRip
format and convert that into
the
other
formats using freely available
web based
tools.
Subtitle software
Subtitles are
required to make video accessible to all users. The process of
making subtitles involves creating an initial subtitle in the SubRip SRT format
then converting it into WebVTT and XML for
Flash
.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
The WebVTT format is used by HTML5 to provide subtitles and i
s relatively
new.
Consequently, t
ools that export directly to this format are hard to find.
Currently WebVTT only works on desktop and laptop computers running
modern browsers with a JavaScript solution.
WebVTT validator :
http://quuz.org/webvtt/
The table below provides information on free subtitling options which have
been tested in this project.
These options can be used to create subtitles
which can be converted to WebVTT format for HTML5 web pages.
Subtitling t
ool
Creates
WebVT
T
Operatin
g system
Ease of
use
1= difficult, 5=
easy
Fre
e
Web
based
solutio
n
Time to
subtitle
3min video
Subtitle
Workshop
No
Windows
only
4
Yes
No
1 hour
MAGpie
No
Windows
only
2
Yes
No
2 hours
Aegisub
No
Windows
and Mac
1
–
c潵汤
n潴
来琠楴i
瑯⁷W牫r
敦e散瑩癥W
y
奥Y
乯
啮獵sc敳獦
畬
Universal
Subtitles/Amar
a
No
Any
operating
system
with a
web
browser.
5
Yes
Yes
20 minutes
Report p
roduced by Kangan Institute
–
Learning Development June 2012
*No software tools that could support export to the WebVTT format were
identified.
The two software programs which
standout as being of the most use are
discussed below.
Subtitle Workshop
Th
is tool plays MP4 encoded files. This is a feature which is unavailable in other
tools.
While it is easy to use the
interface, it
is not completely intuitive and
requires re
gular a
ccess to the help files.
While Subtitle Workshop does not
directly create WebVTT (.vtt) files
,
the conversion process from the .srt type is
exceedingly easy.
Universal
Subtitles
/Amara
This
is
excellent and is by far the easiest subtitling tool available.
There are 3
simple steps that are explained clearly
at
the beginning of each step via short
video instructions. This tool
is
the simplest tool for the
beginner
to
use.
Universal
Subtitles
/Amara
is a web based tool. This means that the video being
worked on
will need to be uploaded to
a video hosting site (
ie
You
Tube
, Vimeo,
your personal website
) in order to apply subtitles.
The video can then be
removed
once subtitling has been completed.
During
the project
trials
,
Universal Subtitles/Amara was used to cr
eate the
initial subtitles file. The file was then converted into a
WebVTT file
later
.
In the
future it is expected that WebVTT will become the standard for delivering
subtitles and there will
be more software available that will export directly to
WebVTT.
Subtitle creation process
Universal Subtitles/Amara
*
was identified as the best tool for creating
initial
subtitles
. The interface is
easy to navigate
and does not contain any more tools
than are needed for
each step which saves time.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
NOTE*
:
If video ca
n’t be uploaded to an internet location it is recommended that Subtitle Workshop is u
sed to
create
subtitles instead
.
The following steps provide instructions for creating subtitles in
Universal
Subtitles
/Amara.
Step 1:
U
pload the video
onto a video hosti
ng site (ie
YouTube, Vimeo
)
or any site or
web server that you have access to.
Step 2:
The Universal Subtitles/Amara website and
instructions on how to create
subtitles are provided in the link
*
below.
The
site contains short instructional
videos for e
ach step.
Step 3 below contains instructions on how to save the
subtitles to your computer
.
http://www.universalsubtitles.org/
NOTE
*
:
Due to an imminent name change from Universal Subtitles to Amara the we
b link
above
will likely
change. If the link is not working it would be best to search
for ‘Universal Subtitles Amara’.
Step 3:
Save the subtitles
to your computer.
s
elect the
‘Download
s
ubtitles’
button at the end of
the final step
c
opy the text
from the text box(
this
contains
the
actual
subtitles
)
Report p
roduced by Kangan Institute
–
Learning Development June 2012
o
pen any text editor such as Notepad on the PC or TextEdit on the Mac
p
aste the copied text into the text editor
d
elete the first 3 lines from the file, these relate
to
Universal
Subtitles/Amara re
quirements only.
s
ave the file as
subs.srt
Step 4:
Convert the file from subs.srt to subs.vtt
*
navigate to this website:
http://atelier.u
-
sub.net/srt2vtt/
(search string
used
to find this site initially w
as
‘convert srt to
web
vtt’)
u
pload the subs.srt file by selecting ‘Choose File’
Report p
roduced by Kangan Institute
–
Learning Development June 2012
s
elect the ‘Convert me please’ button
t
he converted, WebVTT (.vtt) file will download
NOTE
*
: The differences between .srt and .vtt are currently slight. A properly formatted .v
tt file has WEBVTT at
the top of the fil
e and then a blank line and replaces commas in the time format with decimal
points
.
Step 5:
Convert the file subs.srt to .xml for
Flash
N
avigate to this website
*
:
http://vsync.tunezee.com/convertCaption.html
(search string ‘srt to timed text’)
.
S
elect ‘Choose file’ and choose the subs.srt file created earlier
.
C
hoose W3C Timed Text
from ‘Output format’
.
S
elect the ‘Convert’ button
.
D
ownload the converte
d file.
NOTE
*
:
T
his site uses a popup window to process the file conversion.
Check that the p
opups are unblocked on
your browser.
Link subtitles to video
Once you have created and saved the subtitles they have to be linked to the
video on the webpage. Th
e following sections will discuss:
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Embed
ding
subtitles using HTML5 only
The
section ‘
Embed
ding
S
ubtitles using HTML5 only’
will describe how subtitles
will be provided to HTML5 based websites in the future.
Making subtitles work now
T
he section
‘Making
s
ubtitles
work now’
will discuss how to get subtitles to
work before the HTML5 specification is ratified.
Before start
ing
M
ove the
subs.srt,
subs.vtt
and the
subs.xml
file to the ‘
website’
folder
that was
created earlier
All files required should now be i
n the same folder, encoded video files, HTML5
web page
s
and the subtitle files.
It is important to ensure that
all sub title files
are available in the ‘website’ folder.
This will make
files
ready to
work with and
link to the HTML5 encoded video.
The websi
te
folder should contain these files:
videoplayer.fla
videoplayer.swf
SkinUnderPlayStopSeekCaptionVol
.swf
html5videoex
.mp4
html5videoex
.webm
html5video.htm
subs.srt
subs.vtt
subs.xml
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Embed subtitles using HTML5 only
These instructions will provide the HTM
L5 code for embedding subtitles.
Before starting,
open
the
html5video.htm
webpage that
was created
earlier.
That web page contained 3 links to 2 videos:
html5videoex
.mp4
html5videoex
.webm
Two of the links
in this page
were for HTML5 enabled devices and
the
other
was for the
Flash
based fall back if the browser didn’t support HTML5.
The
HTML
code
in this webpage
currently
appears as:
Current code
<body>
<video width="
640
" height="
360
" controls="controls">
<source src="html5videoex.mp4" t
ype="video/mp4" />
<source src="html5videoex.webm" type="video/webm" />
<object id="
flash
Content" type="application/x
-
shockwave
-
flash
"
data="
videoplayer.swf
" width="640" height="400">
<param name="movie" value="v
ideoplayer.swf" />
<p>Download the
Flash
plugin from <a
href="http://www.adobe.com" title="Download
Flash
plugin">www.adobe.com</a></p>
</object>
</video>
</body>
Updated code
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Add the line of code below
after
the <source> ta
gs and
before
the <object> tag
to create the link to the subtitle:
<track src="subs.vtt" kind="subtitles" srclang="en" label="English
subtitles" default />
Th
e
<track> tag
is all that is required to meet the proposed HTML5
specification
of providing subtit
les
.
Currently
there are no browsers that
render the subtitles from the <track> tag only and there
fore
a JavaScript
solution
must be
provided.
This is discussed in the ‘Making it work now’
section of this document.
src
–
this is the location and name of th
e subtitle file
kind
–
specifies whether captions, subtitles, chapters, descriptions or metadata
are being provided.
srclang
–
the language of the track
label
–
the title of the track
default
–
specifies that the track is enabled by default. Many track ele
ments
can be used for the same video.
The webpage code
now
with the <track> tag included appears as below:
<body>
<video width="640" height="360" controls="controls">
<source src="html5videoex.mp4" type="video/mp4" />
<source
src="html5videoex.webm" type="video/webm" />
<track src="subs.vtt" kind="subtitles" srclang="en"
label="English subtitles" default />
<object id="
flash
Content" type="application/x
-
shockwave
-
f
lash
"
data="
videoplayer.swf
" width="640" he
ight="400">
<param name="movie" value="videoplayer.swf" />
<p>Download the
Flash
plugin from <a
href="http://www.adobe.com" title="Download
Flash
plugin">www.adobe.com</a></p>
Report p
roduced by Kangan Institute
–
Learning Development June 2012
</object>
</video>
</body>
1.
Save the chang
es to the web page and test the result in a browser. In
future versions of web browsers this is all that will be needed to get
subti
tles to work. As of April 2012
*
there are no browsers that support
the <track> tag.
NOTE
*
:
Web Developers
should
make sure t
hat the
sites and pages
that are developed
,
work
on all commonly
used web browsers
including old and new
. It is expected that IE8, that does not have <video> tag support will
be in common use for the next few years
, 2015 and beyond
. Therefore
while the <tr
ack> tag will start to
become more widely incorporated into future browsers web developers will still need to make sure that
subtitles are available in older browsers that don’t support
<track>
.
Making it work now
Making the <t
r
ack> tag work in modern web
browsers
At the time of writing there are
three
JavaScript solutions that offer the
required subtitle f
unctionality to the <video> tag;
Playr.js, MediaElement and
BubbleJS.
Playr.js
The chosen JavaScript solution for this project is
playr.js
.
(
Instructio
ns on
downloading and using playr.js
are outlined in
Downloading and Using
Playr.js
)
Media Element
MediaElement.js
http://mediaelementjs.com/
, appears to be a robust
alternative though the configuration is more co
mplex than other available
options.
BubbleJS
Report p
roduced by Kangan Institute
–
Learning Development June 2012
BubbleJS
http://bubbles.childnodes.com/
is well designed and has the most
potential for the creation of interesting video interaction in the future. The
downside
to this however is that it has some features which make it less
compliant
and easy to use
. For example:
i
t only supports .srt subtitles
it has a complex setup which makes it difficult for beginners
the subtitle track is linked through JavaScript not by th
e <track> tag in
the HTML.
Downloading and using playr.js
Playr.js is
downloadable here:
https://github.com/delphiki/Playr
St
e
p 1:
D
ownload the repository as a zip file by selecting
the
ZIP
icon
U
nzi
p the files and then place them into the ‘website’ folder created
earlier
.
D
elete the files called CHANGELOG.markdown and README.markdown
(
they are not important for implementing subtitles
)
.
Your website folder should now include these files and folders:
videoplayer.fla
videoplayer.swf
Report p
roduced by Kangan Institute
–
Learning Development June 2012
SkinUnderPlayStopSeekCaptionVol
.swf
html5videoex
.mp4
html5videoex
.webm
html5video.htm
subs.vtt
subs.xml
playr.js
playr.css
images (folder)
Step 2:
Now link the required files to the webpage
.
Change the <head> of the HTML t
o appear as below:
(This will link the
required JavaScript to the webpage.)
<head>
<title>My HTML5 Video Page</title>
<link rel="stylesheet" type="text/css" href="playr.css" />
<script src="playr.js" type="text/javascript"></sc
ript>
</head>
Step 3:
To enable the JavaScript a small change needs to be made to the <video> tag.
Update the <video> tag so that it matches below:
<video
class="playr_video"
width="640" height="360" controls="controls">
Save and test the web page in
a modern browser.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Subtitles should appear on the page over the video, if they do not
,
use the
video controls that appear underneath the video to show the captions.
*
NOTE:
*
There is a current issue (April 2012) with Google Chrome where the subtitles will n
ot appear unless the
video is being viewed over the
i
nternet. Local computer testing does not work. Either upload the ‘website’
folder to the
i
nternet or test using another browser such as Firefox.
A
Flash
solution
O
lder browsers that don’t support HTML5
video need to use the
Flash
fall
-
back
as
described earlier for
IE 6,7 and 8.
Firstly
the
Flash
video player needs to be
altered to show subtitles.
The steps below will update the videoplayer.fla and
videoplayer.swf files.
There is a video demonstration of
the steps below
available
here:
http://www.youtube.com/watch?v=HcG3L1P149U
Steps
Comments
Open videoplayer.fla that was created
earlier
.
This can be found in the ‘
w
ebsite’
景汤lr.
卥汥S琠瑨攠呥T
琠呯潬 晲潭o瑨攠瑯W汢l爠
–
don’t draw a text box just yet.
卥瑴楮i 瑨攠潰瑩潮猠b敦e牥rT牡r楮i
瑨攠瑥硴潸 獥敭敤 瑯慫a 愠b整瑥爠
牥獵汴 楮i䅤潢A
䙬慳a
C匵S
周楳猠
p
牯b慢汹ln潴op潲瑡WW
瑨潵杨 楴i睡w
晲u獴牡瑩湧
.
卥琠瑨敳攠p牯p敲瑩e猠s敦e牥rT牡r楮i 愠
瑥
硴潸J
Make the text box a
Dynamic
text box
Choose a readable font such as
Arial
When the text box
, or text tool,
is
selected all of the text box properties
can be located in the Properties panel.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Set the font size to
16pt
Choose a bright colour such as
white
or
yellow
Click on the ‘Character
Embedding’ button
Choose ‘
Uppercase’,
‘Lowercase’, ‘Numerals’,
Punctuation’ a
nd ‘Basic Latin’
䑲慷 愠瑥硴潸 慴a瑨攠b潴瑯洠潦 瑨攠
癩摥漠o污祥爠獣牥sn
.
P污l攠楴iw
U敲e 獵s瑩瑬敳eu獵慬汹s
慰p敡爮
䝩G攠瑨攠瑥硴潸 慮 i
n獴慮c攠n慭e 潦
subsText
.
When the text box is selected the
re is
an ‘Instance Name’ option located in
瑨攠P牯p敲瑩e猠s慮敬e
From the ‘
Window’
m敮u ch潯獥s
‘
Components’
.
䑲慧D瑨攠
FLVPlaybackCaptioning
component to the left of the video.
The positioning do
es not matter
as
the component
is not visible when the
movie is
running;
placing it off to the
side of the video player keeps the
work area clear.
Close the ‘Components’ window.
From the ‘Window’ menu choose
‘
Component Inspector’
.
Make sure that the
F
LVPlaybackCaptioning component is
selected.
Click on
the component
with the
‘Selection’ tool (Black Arrow)
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Select the ‘Parameters’ tab on the
‘Component Inspector’ window.
卥琠瑨攠
CaptionTargetName
property
to
subsText
This is the name of the text box
c
reated earlier.
Set the
Source
property to
subs.xml
subs.xml
is the subtitle file
created
for
Flash
earlier.
From the menu choose ‘Control’ and
then ‘Test Movie’.
周攠獵s瑩瑬W猠獨潵汤 慰p敡爠瑨潵杨
瑨敹em慹abe 愠汩瑴汥 晬慴a慮T n潴瑡oT
潵琠慳ucU 慳
硰xc瑥T. On攠睡礠瑯w
晩砠瑨楳猠i漠慴o慣U 愠
Drop Shadow
filter to the text box.
Select the text box.
From the ‘Properties’ panel choose
‘Filters’
.
Select the ‘Add Filter’ button at the
b潴瑯洠汥晴l潦 瑨攠pan敬e
周攠楣潮o汯潫o 汩步l愠p楥i攠潦 p慰敲e
C
U潯獥s
Drop Shadow.
Save and test the movie again.
A
Flash
file that plays subtitles has
been created.
This should have updated the
videoplayer.swf file that is in the
‘Website’ folder.
Go back to the ‘Website’ folder and
潰敮 瑨攠
html5video.htm
file
in IE
6,7,8 to view the
Flash
fall
-
back. The
subtitles should now be working
there.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Making it work now, on an Android device
Androids are more complex.
The
video opens in a native Android player and
does not play in the webpage directly
because the
subt
itle track is ignored
by
the internal Android vid
eo player. W
hile it is possible to embed
subtitles on the
video
(as described later in
Making It Work N
ow on an Apple
D
evice
) the
current Android video player does not give the option of selecting them.
The
refore a
Flash
alternative that does supply subtitles is required. To supply
the
Flash
alternative
a
Flash
fall
-
back in the HTML5 <video> tag
is needed
in
combination
with a
JavaScript fix that:
removes the <video> tag completely (which, as a by
-
product re
moves
the HTML5
Flash
fall
-
back)
re
-
embeds the
Flash
video.
In order to
implement HTML5 and video in the
easiest
most conformant and
future proof
way
, two
JavaScript libraries were used
;
SWFObject and jQuery,
and a short customised script
.
NOTE:
Custom J
avaScript could have been written to do everything mentioned
above though it is easier to implement
the proposed fixes using these
common
JavaScript
libraries
.
JQuery is becoming more widely used and it is not unlikely
that it is already available on the p
age that will hold the video
that requires
this fix
.
Add the required JavaScript to the page
Step 1:
Download the required JavaScript libraries SWFObject and jQuery.
SWFObject:
http://code.google.com/p/swf
object/
jQuery:
http://jquery.com/
At the time of writing the current versions are SWFObject2.2 and jQuery 1.7.2
use the latest versions that you can find to ensure cross browser compatibility.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Step 2:
Place the JavaScr
ipt files into the ‘
w
ebsite’ folder
*.
Note
*
:
When the SWFObject folder is unzipped
it creates a number of folders that contain examples of how to
use it and 2 SWFObject JavaScript files. Both files will work though the one file that is used in the examples
below is the minified version found in
the folder
:
swfobject_2_2/swfobject/swfobject.js
.
The files
now
in the ‘
w
ebsite’ folder should appear as below:
videoplayer.fla
videoplayer.swf
SkinUnderPlayStopSeekCaptionVol
.swf
html5videoex
.mp4
html5videoex
.webm
html5video.htm
subs.vtt
subs.xml
playr.js
playr.css
images (folder)
jquery
-
1.7.2.min.js
(or similar depending on current version)
swfobject.js
(or similar depending on current version)
Step 3:
Open
html5video.htm
in
a preferred
web editor
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Paste the followi
ng HTML into the <head> of the document
above the
playr.js
link.
Ensure that the same order as below is kept
as it
is
important.
<link rel="stylesheet" type="text/css" href="playr.css" />
<script src="jquery
-
1.7.2.min.js" type="text/javascript"
language="j
avascript"></script>
<script src="swfobject.js" type="text/javascript"
language="javascript"></script>
<script src="playr.js" type="text/javascript"></script>
Step 4:
This step will:
include some custom code that inserts a
flash
object
use information fro
m the
flash
fall
-
back in the video tag
remove the <video> tag completely
complete the process
on an Android device only.
1.
Insert the code below between the swfobject.js and playr.js <script>
tags.
The code below waits until the page is ready. Once the page
is ready it looks
for the Android* operating system (OS) and if it finds the Android OS it:
creates a <div> for the new
Flash
to be embedded in
embeds the
Flash
video into the newly created <div> using information
that is obtained from the
Flash
fall
-
bac
k in the <video> tag
deletes the <video> tag from the page as it is no longer required
Report p
roduced by Kangan Institute
–
Learning Development June 2012
<script src="swfobject.js" type="text/javascript"
language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
if(navigator.userAge
nt.toLowerCase().indexOf("android") >
-
1) {
$("<div id=
'
flash
Content'
></div>").insertBefore("video");
swfobject.embedSWF($(
"video object").attr("data")
+”?”
,
"
flash
Content", $("video object").attr("width"), $("video
object").attr("height"), "9.0.0");
//
all on one line.
$("video").remove();
}
})
</script>
<script src="playr.js" type="text/javascript"></script>
IMPORTANT
NOTE*:
For some reason
Flash
video does not work on Android in a
Flash
video player
**
unless
there is a question mark (?) after the
path to the
Flash
file.
A question mark is used to send information from
the web page back into
Flash
. This is why there is a question mark in the code above
-
($("video
object").attr("data")
+”?”
,
–
If variables are being sent to
Flash
from the standard
Fl
ash
embed created in the
HTML5 <video> tags it is wise to remove the question mark from the
JavaScript
code. Here is the amended
code
-
($("video object").attr("data"),
NOTE
**
: playr.js still runs though it does not find a <video> tag and does not initiali
ze any code that causes
confusion for the Android device.
Step 5:
Upload the website and t
est this
on
an Android device.
Making it work now, on an Apple device
Apple iOS devices such as the iPhone, iPod and iPad work differently with
video in web pages. R
ather than playing the video directly in the webpage the
video opens i
n the inbuilt iOS video
player. This
means that any subtitles
provided by the web page will not be visible as the video is not displayed in the
webpage.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
The best way to provide a sol
uti
on is to return to
Handbrake
so that subtitles
can be directly encoded onto the video.
This section will provide instructions
on this process.
A video demonstration of the steps below is available here:
http://www.youtube.com/watch?v=SiBJtF7bQOs
Step 1:
Encode the video with subtitles
*. (
The
subs.srt
file will be used for this
purpose)
Open the Handbrake application
Locate
and use
the original video file
, do not use any of the videos
previously
encoded and compressed, using these videos would only
produce a poor quality result
as you would be recompressing an already
compressed video
.
Make the e
xport
ed
file
name
html5exsubs.mp4
Select the tab labelled
‘Subtitles’
Select the
‘Add External SRT’
but
ton
Navigate to the
‘
w
ebsite’
folder
Choose the
subs.srt
file
Press the
Start
button to begin the encoding process.
When encoding is finished m
ove the new MP4 file to the ‘website’ folder
Step 2:
Link the new subtitled video to the webpage.
Change the firs
t <source> tag from this
<source src="html5videoex.mp4" type="video/mp4" />
Report p
roduced by Kangan Institute
–
Learning Development June 2012
To this:
<source src="
html5exsubs.mp4
" type="video/mp4" />
Upload
the new video file and the changes to the webpage
and test the
webpage on an iOS device such as an iPad.
Select
th
e subtitles button when the video loads
in the video player
to
see the encoded subtitles with the video.
NOTE
*
:
Encoding
subtitles directly into the video
does not mean
the HTML based webpage no longer needs the
<track> tag. The above is a ‘fix’ for provid
ing subtitles on an iOS device only.
It didn’t work
on the iPad
?
Not all versions of
iPad
s
are the same
. A
t the time of writing, iPad 1,2 and 3
were
available.
When testing the procedure outlined above
, both
iPad 1 and
iPad 2 gave different results. On s
ome iPads the video played well how
ever on
others there was a conflict between playr.js JavaScript library and
the iPad
,
as
playr.js
JavaScript library tried to override the iPad in how the video was
played.
This problem can be is solved by amending the J
avaScript for Android so that
subtitles
are
co
nsistently
available
on iPad devices
as per instructions below:
Step 1
Amend the JavaScript for Android in the <head> of the html5video.htm
webpage so it appears as below:
<script type="text/javascript">
$(
document).ready(function(){
if(navigator.userAgent.t
oLowerCase().indexOf("android")
>
-
1) {
$("<div id=
'
flash
Content'
></div>").insertBefore("video");
swfobject.embedSWF($("video object").attr("data")+"?",
"
flash
Content", $("video object").att
r("width"), $("video
object").attr("height"), "9.0.0");
$("video").remove();
Report p
roduced by Kangan Institute
–
Learning Development June 2012
}
if(navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i)){
$("video").removeAttr("class")
}
})
</script>
This JavaScript removes the ‘class’ attribute from the <video> tag that triggers
the playr.js scr
ipt to create the video player.
This means that the video will
display in the webpage as normal HTML5 video does on an iPad an
d the
subtitles will be available when the video is played in the native iPad video
player.
Conclusion
In due time,
HTML5 will make the work of a web developer
more efficient and
effective.
Once the final video format is chosen, e
mbedding video
in HTML5
webpages
will
become less complex.
In addition
,
the
implementation of
subtitles using the <track> tag will eventually require less or no JavaScript fixes.
In the meantime, a
Flash
fall
-
back will be necessary as
IE8 is expected to be
used widely
until 20
15 when Microsoft stops support for Windows XP
and it
currently
d
oe
s not support the <video> tag.
There is still some degree of complexity in c
reating subtitles
, in that there is a
lack of available software for easy and less time
consuming file
conversio
n to
HTML5 compatible formats. However, this may change at some stage as the
available features in
Universal Subtitles/Amara
were better than expected and
have the potential to be developed further.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Google are
currently working on providing subtitles in
Yo
uTube
by
developing
voice recognition. However this needs further refinement as when voice
recognition was tested
with
video
accompanied by
good quality audio
;
approximately 10% of what was said was correct. Discussion of these res
ults
can be viewed at thi
s link
http://www.youtube.com/watch?v=krq1msguNFo
.
It was not possible to locate information that
indicated how iOS or Android will
support
HTML5/web based
subtitles in the future. This was a litt
le
disappointing as these devices seem to
be behind the
rapid uptake of HTML5
among web developers
. Perhaps changes will occur when the HTML5
specification is completed.
Currently there
is a lack of
tools that will create, or help to create, WebVTT
format
files. It is expected that this w
ill
change as the format is very similar to
the fairly common SRT format
and may not require major
changes to
existing
software
.
Over the life of the project it
has been
noted that changes were still
happening and
there wa
s an increase in
available
tools
.
(Such is the rate of
change that
the information in this
document was frequently changed to
include new developments.)
BubbleJS
http://bubbles.childnodes.com/
provides a promi
sing
future for
both
triggering subtitles successfully
and providing a
high functioning video player.
The BubbleJS player can trigger actions that happen outside of the video player
such as opening, closing, animating, effecting colour changes
etc.
on
othe
r
html objects. This is an excellent result for education
in that it provides a
video
player that
can
provide accessible
video and
also
interact with other page
elements to present information related to the video in
engaging and
innovative ways.
Hopefully
the setup of BubbleJS becomes easier.
Working with video on the web has, over the years, become much easier and a
lot of time savings can be found in good processes and work practices.
Hopefully the time saved can be dedicated to the creation of subtitles
and
accessible video for all internet users.
Report p
roduced by Kangan Institute
–
Learning Development June 2012
Acknowledgements
This project was made possible by funding from the Australian Government's National VET
E
-
learning Strategy, through the New Generation Technologies for Learning business
activity.
With the exception of the Commonwealth Coat of Arms, the Department’s logo, any material protected by a trade mark
and where otherwise noted all material presented in this document is provided under a Creative Commons Attribution 3.0
Australia (
http://creativecommons.org/licenses/by/3.0/au/
) licence.
flexiblelearning.net.au
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο