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/
title="theme" />
<script type="text/javascript" src="js/leanbackPlayer.js"></script>
<script type="text/javascript" src="js/
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"
type="text/plain" src="subtitle/
<track enabled="true" kind="subtitles" label="English"
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>
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.
The Leanback Player demonstration page can be found at .
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 .
Search WWH ::

Custom Search