HTML and CSS Reference
In-Depth Information
<div style="position: absolute; top: 50px; left: 600px; display:none">
<video loop controls id="thevideo" width="320" height="240" preload="auto">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
However, we already know that we don't want to use an HTML embed. As we stated
at the end of the last section,
video
events do not appear to fire reliably when
video
elements are embedded in the HTML page. For this reason, we need a new strategy to
load video dynamically—we'll create the
<div>
and
<video>
elements in JavaScript.
The first thing we do in our JavaScript is add a couple variables to hold references to
the dynamic HTML elements we will create. The
videoElement
variable will hold the
dynamically created
<video>
tag, while
videoDiv
will hold the dynamically created
<div>
:
var videoElement;
var videoDiv;
We use this method to create global variables throughout this chapter.
There are many reasons not to use global variables, but for these simple
applications, it's the quickest way to get something on the canvas. If you
want to learn a better way to handle loading assets, the last section of
Chapter 7
employs a strategy to preload assets without the use of global
variables.
Next, we create our dynamic form elements in the
eventWindowLoaded()
function. First,
we use the
createElement()
method of the document DOM object to create a
<video>
element and a
<div>
element, placing references to them in the variables we just created:
function eventWindowLoaded() {
videoElement = document.createElement("video");
videoDiv = document.createElement('div');
document.body.appendChild(videoDiv);
Next, we add
videoElement
as a child of
videoDiv
, essentially putting it inside of that
<div>
on the HTML page. We then set the style attribute of
<div>
to
display:none;
,
which will make it invisible on the HTML page. We do this because although we want
the video to display on the canvas, we don't want to show it on the HTML page:
videoDiv.appendChild(videoElement);
videoDiv.setAttribute("style", "display:none;");
We then create another new variable named
videoType
that holds the results of a new
function we will create,
supportedVideoFormat()
. This function returns the file exten-
sion of the supported video format for the browser; otherwise, it returns
“”
(an empty
string), which means we alert the user that there is no video support in the app for his
browser:
