VirtualMV/JavaScript/Video
From WikiEducator
< VirtualMV | JavaScript
Overview
|
: JS and VideoBy the end of this page you will be able to:
|
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>
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/Video. (2024). In WikiEducator/VirtualMV wiki. Retrieved December 21, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Video (zotero)
|
