AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home HTML & CSS

Build an HTML5 Video Player with Custom Controls

Lakshika Mathur by Lakshika Mathur
January 2, 2020
Reading Time: 2 mins read
0
Build an HTML5 Video Player with Custom Controls

Hey! Are you looking for an accessible video player to implant video on a webpage? Therefore, with the HTML5, you can quickly implement the video player on the webpage. So, there is no need to use any jQuery plugin or flash for that. The HTML5 <video> element offers a standard way to embed the video file on the web page.

RELATED POSTS

Display Loading Image While Page Loads using jQuery and CSS

How to Create Loader Animation with CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

The following HTML displays a video player in a web page.

<video width="520" height="250" controls>
    <source src="videos/codexworld.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
  • Controls characteristic adds controls to video, like play, pause, full screen, volume, etc.
  • Include the width and height functionality to specify the size of the video.
  • It is also a good idea to showcase a message when the browser does not support < video> element. The text between the <video> and </video> tags will display when browser is not support HTML5 video.

You can use the autoplay attribute to start the video automatically. To play video automatically on page load, place the autoplay attribute into the <video> element.

<video width="520" height="250" controls autoplay>
    <source src="videos/codexworld.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

SEE ALSO: How to Force Download File in PHP

HTML5 Video Player Custom Controls

HTML5 defines DOM properties, method, and events which permits you to define custom video controls. Using custom controls, you can add or customize the video controls buttons and add a logo in the video player.

With the above instance, we’ve implemented some custom control buttons using JavaScript; you can add or deduct many other custom controls in HTML5 video player.

HTML:

<button onclick="playPause()">Play/Pause</button>
<button onclick="reload()">Reload</button>
<button onclick="makeLarge()">Large</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="videoPlayer" width="500">
  <source src="videos/codexworld.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

JavaScript:

<script> 
var video = document.getElementById("videoPlayer");
function playPause() { 
    if (video.paused) 
        video.play(); 
    else 
        video.pause(); 
}
function reload() { 
   video.load(); 
}
function makeLarge() { 
    video.width = 1000; 
}
function makeSmall() { 
    video.width = 250; 
} 
function makeNormal() { 
    video.width = 500; 
} 
</script>

Also, read our previous blog- Create a Digital Clock with Date using JavaScript

Tags: Custom ControlsHTML5 Video Player
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
42
How to Create Loader Animation with CSS
HTML & CSS

How to Create Loader Animation with CSS

January 1, 2020
10
Accessing Webcam and Capture Image using HTML5 and JavaScript
HTML & CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

December 30, 2019
41
jQuery UI Autocomplete with Images and Custom HTML in PHP
HTML & CSS

jQuery UI Autocomplete with Images and Custom HTML in PHP

December 29, 2019
112
Add WYSIWYG HTML Editor to Textarea with CKEditor
HTML & CSS

Add WYSIWYG HTML Editor to Textarea with CKEditor

December 27, 2019
13
Convert HTML to PDF using JavaScript
HTML & CSS

Convert HTML to PDF using JavaScript

December 25, 2019
59
Next Post
Confirmation Before Closing of Tab/Browser using JavaScript

Confirmation Before Closing of Tab/Browser using JavaScript

Redirect non-www to www & HTTP to HTTPS using .htaccess file

Redirect non-www to www & HTTP to HTTPS using .htaccess file

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version