VirtualMV/JavaScript/Video

From WikiEducator
Jump to: navigation, search




Overview

VmvIcon Objective.png

: JS and Video

By the end of this page you will be able to:

  • Control video using JavaScript tools


Example

<html>
<head>
<title>Creating a JavaScript HTML5 video pause/Play/Zoom feature</title>
<script> 
function fnVidControl(clkAction) { 
    var myVideo = document.getElementById("vidFish"); 
    if (clkAction=="PlayPause") {
	  if (myVideo.paused) { myVideo.play(); } else { myVideo.pause();  }
	}
    if (clkAction=="Zoom")   {	 myVideo.width = 560; }
    if (clkAction=="Normal") {	 myVideo.width = 420; }
} 
</script> 
</head>
<body>
<h3>Video</h3>
<p>A specific Video (and audio) tag has been introduced into html5. You are able to create custom buttons in JavaScript to control the video as shown below . Check http://www.w3schools.com/html/html5_video.asp for supported formats (2015: mp4, WebM and ogg)</p>
<div style="text-align:left"> 
  <span onclick="fnVidControl('PlayPause')">[Play/Pause]</span>  
  <span onclick="fnVidControl('Zoom')">[Zoom]</span> <span onclick="fnVidControl('Normal')">[Normal]</span>
  <br> 
  <video id="vidFish" width="296">
    <source src="20060404Goldfish02.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 
</body>
</html>

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Video. (2021). In WikiEducator/VirtualMV wiki. Retrieved January 17, 2021, from http:https://wikieducator.org/VirtualMV/JavaScript/Video    (zotero)