HTML5 – Take Control Using the DOM

The HTML5 <video> element also has methods, properties, and events.

There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set. There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc.

The examples below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.

Example

Create simple play/pause + resize controls for a video:


 

 

<!DOCTYPE html>

<html>

<body>

 

<div style="text-align:center">

<button onclick="playPause()">Play/Pause</button>

<button onclick="makeBig()">Big</button>

<button onclick="makeSmall()">Small</button>

<button onclick="makeNormal()">Normal</button>

<br />

<video id="video1" width="420">

<source src="mov_bbb.mp4" type="video/mp4" />

<source src="mov_bbb.ogg" type="video/ogg" />

Your browser does not support HTML5 video.

</video>

</div>

 

<script type="text/javascript">

var myVideo=document.getElementById("video1");

 

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

 

function makeBig()

{

myVideo.width=560;

}

 

function makeSmall()

{

myVideo.width=320;

}

 

function makeNormal()

{

myVideo.width=420;

}

</script>

 

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body>

</html>

How Did HTML5 Get Started?

HTML5 will be the new standard for HTML. Major browsers support many of the new HTML5 elements and APIs.

     HTML5

  • New Elements
  • New Attributes
  • Full CSS3 Support
  • Video and Audio
  • 2D/3D Graphics
  • Local Storage
  • Local SQL Database
  • Web Applications

Some rules for HTML5 were established:

1. New features should be based on HTML, CSS, DOM, and JavaScript

2.Reduce the need for external plugins (like Flash)

3.Better error handling

4.More markup to replace scripting

5.HTML5 should be device independent

6.The development process should be visible to the public

Sample HTML5 document

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

 

<body>

The content of the document……

</body>

</html>

 

HTML5 Drag and Drop

In HTML5, drag and drop is part of the standard, and any element can be draggable.

Internet Explorer 9, Firefox, Chrome, and Safari 5 support drag and drop.

Note: Drag and drop does not work in Safari 5.1.2.

Example:

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

 

function drop(ev)

{

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

</script>

</head>

<body>

 

<div id="div1" ondrop="drop(event)"

ondragover="allowDrop(event)"></div>

 

<img id="drag1" src="ball.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69" />

</body>

</html>

HTML5 Audio

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

Example

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

HTML5 Audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video> and <audio>

 

HTML5 Video

HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

Example:

<video width=”320″ height=”240″ controls=”controls”>

<source src=”movie.mp4″ type=”video/mp4″ />

<source src=”movie.ogg” type=”video/ogg” />

Your browser does not support the video tag.

</video>

HTML5 Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in mediaplayers

 

HTML5 – New Features

Some of the most interesting new features in HTML5:

  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search