HTML5 Game - Basic HTML5 video with resize range control

  1. HOME
  2. HTML5 Game
  3. Video
  4. Video Element

Description

Basic HTML5 video with resize range control

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {/*from   w  w  w . j  a  v a  2s. com*/
  let sizeElement = document.getElementById("videoSize")
  sizeElement.addEventListener('change', videoSizeChanged, false);
  let videoElement = document.getElementById("theVideo");
  let widthtoHeightRatio = videoElement.width/videoElement.height;
    

function videoSizeChanged(e) {
    
    let target =  e.target;
    let videoElement = document.getElementById("theVideo");
    videoElement.width = target.value;
    videoElement.height = target.value/widthtoHeightRatio;
  }
}

</script>
</head>
<body>
<div>
<form>
 Video Size : <input type="range" id="videoSize"
       min="80"
       max="1280"
       step="1"
       value="320"/>
  </form>
  <br>   
</div>
<div>
<video  autoplay loop controls id="theVideo" width="320" height="240">

 <source src="http://java2s.com/style/demo/your.webm" type='video/webm; codecs="vp8, vorbis"' >
 <source src="http://java2s.com/style/demo/your.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
 <source src="http://java2s.com/style/demo/your.ogg" type='video/ogg; codecs="theora, vorbis"'>
 
</video>
</div>

</body>
</html>

Related Topic