HTML and CSS Reference
In-Depth Information
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH6EX4: Basic HTML5 Video With Resize Range Control
</title>
</title>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
var
var
sizeElement
=
document
.
getElementById
(
"videoSize"
)
sizeElement
.
addEventListener
(
'change'
,
videoSizeChanged
,
false
false
);
var
var
videoElement
=
document
.
getElementById
(
"theVideo"
);
var
var
widthtoHeightRatio
=
videoElement
.
width
/
videoElement
.
height
;
function
function
videoSizeChanged
(
e
) {
var
var
target
=
e
.
target
;
var
var
videoElement
=
document
.
getElementById
(
"theVideo"
);
videoElement
.
width
=
target
.
value
;
videoElement
.
height
=
target
.
value
/
widthtoHeightRatio
;
}
}
<
/script>
</head>
</head>
<body>
<body>
<div>
<div>
<form>
<form>
Video Size:
<input
<input type=
"range"
id=
"videoSize"
min=
"80"
max=
"1280"
step=
"1"
value=
"320"
//>
</form>
</form>
<br>
<br>
</div>
</div>
<div>
<div>
<video
<video autoplay loop controls id=
"theVideo"
width=
"320"
height=
"240"
>
<source
<source src=
"muirbeach.webm"
type=
'video/webm; codecs="vp8, vorbis"'
>
<source
<source src=
"muirbeach.mp4"
type=
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
>
<source
<source src=
"muirbeach.ogg"
type=
'video/ogg; codecs="theora, vorbis"'
>
</video>
</video>
</div>
</div>
</body>
</body>
</html>
</html>