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"'>
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
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');
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.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
Search WWH ::

Custom Search