HTML and CSS Reference
In-Depth Information
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH6EX12: Multiple Video Bounce
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
var
var
videoElement
;
var
var
videoDiv
;
function
function
eventWindowLoaded
() {
videoElement
=
document
.
createElement
(
"video"
);
var
var
videoDiv
=
document
.
createElement
(
'div'
);
document
.
body
.
appendChild
(
videoDiv
);
videoDiv
.
appendChild
(
videoElement
);
videoDiv
.
setAttribute
(
"style"
,
"display:none;"
);
var
var
videoType
=
supportedVideoFormat
(
videoElement
);
iif
(
videoType
==
""
) {
alert
(
"no video support"
);
return
return
;
}
videoElement
.
addEventListener
(
"canplaythrough"
,
videoLoaded
,
false
false
);
videoElement
.
setAttribute
(
"src"
,
"muirbeach."
+
videoType
);
}
function
function
supportedVideoFormat
(
video
) {
var
var
returnExtension
=
""
;
iif
(
video
.
canPlayType
(
"video/webm"
)
==
"probably"
||
video
.
canPlayType
(
"video/webm"
)
==
"maybe"
) {
returnExtension
=
"webm"
;
}
else
else iif
(
video
.
canPlayType
(
"video/mp4"
)
==
"probably"
||
video
.
canPlayType
(
"video/mp4"
)
==
"maybe"
) {
returnExtension
=
"mp4"
;
}
else
else iif
(
video
.
canPlayType
(
"video/ogg"
)
==
"probably"
||
video
.
canPlayType
(
"video/ogg"
)
==
"maybe"
) {
returnExtension
=
"ogg"
;
}
return
return
returnExtension
;
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}