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>
Search WWH ::




Custom Search