HTML and CSS Reference
In-Depth Information
JavaScript library and associated language libraries are loaded using script elements, as is the
default CSS file:
<link rel="stylesheet" media="screen" href="css/
leanbackPlayer_default.css"
title="theme" />
<script type="text/javascript" src="js/leanbackPlayer.js"></script>
<script type="text/javascript" src="js/
leanbackPlayer_en.js"></script>
The
video
element is included within a
div
element given a
class
attribute with a value of
leanback-player-video
. The example file shows that the
track
elements are defined with
a different structure. I extrapolated a simplified subtext of the HTML, as follows:
<div class="leanback-player-video">
<video width="532" height="300" preload="metadata" controls>
<source src="videos/video.mp4" type="video/mp4" />
<source src="videos/video.ogv" type="video/ogg" />
<track enabled="true" kind="subtitles" label="Japanese"
srclang="ja"
type="text/plain" src="subtitle/
japanese_ja_vertical.vtt"></track>
<track enabled="true" kind="subtitles" label="English"
srclang="en"
type="text/plain" src="subtitle/english_en.vtt"></track>
<track enabled="true" kind="subtitles" label="Arabic" srclang="ar"
type="text/plain" src="subtitle/arabic_ar.vtt"></track>
</video>
</div>
Notice that the
track
elements have start and end tags, though using the empty element syntax
demonstrated in other examples should also work. But also note the use of the
enabled
and
type
attributes. These are non-standard attributes and, from looking at the JavaScript, are re-
quired for the application to work.
NOTE
The Leanback Player demonstration page can be found at
http://leanbackplayer.com/test/webvtt.html
.
It uses another of the Blender open movie projects, Elephants Dream.
It also looks like the newer version of the code requires that the fallback content be placed into
another
div
element, and given a
class
attribute with a value of
leanback-player-html-
fallback
.
