1.2

Helpfulness: 0
Set Details Share
created 2 years ago by garbage
3 views
Code that interacts with UI Controls - Video
updated 2 years ago by garbage
show moreless
Page to share:
Embed this setcancel
COPY
code changes based on your size selection
Size:
X
Show:
1

<video src="sample.mp4" autoplay>

Embeds a video, this is bare minimum

2

<video SRC="">

src - attribute specifies the video to play. can be local or a URL

3

<video autoplay>

Tells the browser to start playing the video as soon as it loads.

4

<video controls>

Tell the browser to include its built-in video controls, such as play and pause.

5

<video height="" width="">

These control the amount of space the video will occupy on the page.

6

<video loop>

Tells the browser to continuously play the video after it completes

7

<video poster="something.jpg">

Specifies an image to show in the place allocated to the video until the user starts to play the video. USE THIS WHEN YOU'RE NOT USING AUTOPLAY.

8

Check for browser support code: Goes through each of the options and plays the first available one.

<video controls poster="picture.jpg">

<source src="sample.ogv" type="video/ogg" />

<source src="sample.mp4" type="audio/mp4" />

<object> <p> Video is not supported by this browser </p> </object>

</video>

9

Javascript to change <video>

var video;

window.onload = function() { video = document.getElementById("sample"); }

function play() {video.play(); }

function pause() { video.pause(); }

function back() { vidoe.currentTime -= 10; }

<table> <tr> <td> <video id="sample"></td>

<td>

<img id="backButton" src="back.jpg" onclick="back();" />

<img id="playButton" src="play.jpg" onclick="play();" />

<img id="pauseButton" src="pause.jpg" onclick="pause();" />

10

<audio> is essentially the same as <video>

true: it has all the same attributes and same methods. The only real difference is how it displays in the browser.