DOM control HTML5 <video>
The HTML5 <video> element also has methods, properties, and events.There are methods for playing, pausing, and loading.
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.
Syntax:
<video width="320px" height="240px" autobuffer="autobuffer" autoplay="autoplay" loop="loop" controls="controls" poster="/_img/videostill.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Example: The example above calls two methods:
play() and pause().
It also uses three properties: paused, height and videoHeight.
<!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">
<source src="movie1.mp4" type="video/mp4" />
<source src="movie2.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.height=(myVideo.videoHeight*2);
}
function makeSmall()
{
myVideo.height=(myVideo.videoHeight/2);
}
function makeNormal()
{
myVideo.height=(myVideo.videoHeight);
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
HTML5 <video> - Methods, Properties, and Events
The lists of table below are the video methods, properties, and events which supported by most browsers:| Methods | Properties | Events |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType | videoHeight | error |
| duration | timeupdate | |
| ended | ended | |
| error | abort | |
| paused | empty | |
| muted | emptied | |
| seeking | waiting | |
| volume | loadedmetadata | |
| height | ||
| width |
Attributes
Additional to the standard attributes (like width, height, id…) there are some attributes specific to the video-tag.
To be precise: These attributes are not all specific to the video tag, some are also used for the audio-tag.
Display attributes
- src (string): The source file
- poster (URL): An image to display before the video is playing
- controls (boolean): Are the playback-controls being provided by the browser?
- videoWidth, videoHeight (integer): The original video size
- currentTime (float): The current playback time in seconds
- startTime* (float): The video start time (if the video does not start at 0.0 – streams for example)
- duration (float): The duration in seconds
- paused (boolean): Is the video currently paused?
- ended (boolean): Has the video ended?
- autoplay (boolean): Is is set to autoplay?
- loop (boolean): Is is set to play in a loop?
- autobuffer (boolean): Should the browser start buffering the video immediately?
- seeking (boolean): Is the browser currently seeking in the video?
- defaultPlaybackRate* (float): The playback speed at which the video should be played
- playbackRate* (float): The current playback speed: 1.0 is normal, 2.0 is two times faster forward, -3.0 is three times faster backwards and so on
- seekable* (TimeRanges): An object of ranges in which the browser can seek (more about this below)
- buffered* (TimeRanges): An object of ranges which are already buffered
- played* (TimeRanges): An object of ranges which the user has already played
- volume (float): The current volume — from 0.0 to 1.0
- muted (boolean): Is the video muted? Takes precedence of the volume
- readyState (int): State of the video (explanation below)
- networkState (int): State of the network (explanation below)
- error (MediaError): A media error object if something went wrong
No comments:
Post a Comment