Horje
How to create HTML Video - Methods, Properties, and Events using Javascript

This tutorial will add some options.

Such as:
  1. Video Play/Pause button.
  2. Video Play Big
  3. Video Play Small
  4. Video Play Normal

The HTML DOM defines methods, properties, and events for the element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example of HTML Video - Methods, Properties, and Events using Javascript

Example: Using JavaScript
index.html
Example: HTML 
<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
    Your browser does not support HTML video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script> 

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

Output should be:

Example of HTML Video - Methods, Properties, and Events using Javascript



Category:
 Web Tutorial
Sub Category:
 HTML Input Attributes
Uploaded by:
 Admin

Read Article
https://develop.horje.com/learn/1434/reference

 

Horje