From WikiEducator
Jump to: navigation, search


VmvIcon Objective.png

: JS and Video

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

  • Control video using JavaScript tools


<title>Creating a JavaScript HTML5 video pause/Play/Zoom feature</title>
function fnVidControl(clkAction) { 
    var myVideo = document.getElementById("vidFish"); 
    if (clkAction=="PlayPause") {
	  if (myVideo.paused) {; } else { myVideo.pause();  }
    if (clkAction=="Zoom")   {	 myVideo.width = 560; }
    if (clkAction=="Normal") {	 myVideo.width = 420; }
<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 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>
  <video id="vidFish" width="296">
    <source src="20060404Goldfish02.mp4" type="video/mp4">
    Your browser does not support HTML5 video.

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Video. (2022). In WikiEducator/VirtualMV wiki. Retrieved August 12, 2022, from http:    (zotero)