HTML and CSS Reference
In-Depth Information
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH6EX5: Basic HTML5 Preloading Video
</title>
</title>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
var
var
videoElement
=
document
.
getElementById
(
"thevideo"
);
videoElement
.
addEventListener
(
'progress'
,
updateLoadingStatus
,
false
false
);
videoElement
.
addEventListener
(
'canplaythrough'
,
playVideo
,
false
false
);
}
function
function
updateLoadingStatus
() {
var
var
loadingStatus
=
document
.
getElementById
(
"loadingStatus"
);
var
var
videoElement
=
document
.
getElementById
(
"thevideo"
);
var
var
percentLoaded
=
parseInt
(((
videoElement
.
buffered
.
end
(
0
)
/
videoElement
.
duration
)
*
100
));
document
.
getElementById
(
"loadingStatus"
).
innerHTML
=
percentLoaded
+
'%'
;
}
function
function
playVideo
() {
var
var
videoElement
=
document
.
getElementById
(
"thevideo"
);
videoElement
.
play
();
}
<
/script>
</head>
</head>
<body>
<body>
<div>
<div>
<video
<video loop controls id=
"thevideo"
width=
"320"
height=
"240"
preload=
"auto"
>
<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
<div id=
"loadingStatus"
>
0%
</div>
</div>
