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
offer web hosting offer web hosting offer web hosting
ADVERTISEMENT
Home HTML & CSS

Build an HTML5 Video Player with Custom Controls

Lakshika Mathur by Lakshika Mathur
January 2, 2020
Reading Time:2min 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.

1
2
3
4
<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.

1
2
3
4
<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:

1
2
3
4
5
6
7
8
9
10
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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
8
How to Create Loader Animation with CSS
HTML & CSS

How to Create Loader Animation with CSS

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

Accessing Webcam and Capture Image using HTML5 and JavaScript

December 30, 2019
11
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
17
Add WYSIWYG HTML Editor to Textarea with CKEditor
HTML & CSS

Add WYSIWYG HTML Editor to Textarea with CKEditor

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

Convert HTML to PDF using JavaScript

December 25, 2019
0
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 *

Popular Posts (Last 7 Day)

Like Dislike Rating System with jQuery, Ajax, and PHP

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
72
Star Rating System with jQuery, Ajax, PHP, and MySQL

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
15
Redirect non-www to www & HTTP to HTTPS using .htaccess file

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

January 2, 2020
4
Confirmation Before Closing of Tab/Browser using JavaScript

Confirmation Before Closing of Tab/Browser using JavaScript

January 2, 2020
19
Build an HTML5 Video Player with Custom Controls

Build an HTML5 Video Player with Custom Controls

January 2, 2020
17
Create a Digital Clock with Date using JavaScript

Create a Digital Clock with Date using JavaScript

January 2, 2020
31

Categories

  • Comparison (2)
  • HTML & CSS (9)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (47)
  • Security (2)
  • SEO (2)
  • Trademark (1)
  • Tutorials (2)
  • Web Hosting (8)
    • VPS Server (2)
  • WordPress (5)

Recommended Stories

Form Validation using jQuery Validation Plugin

Form Validation using jQuery Validation Plugin

January 2, 2020
5
Login with GitHub OAuth API using PHP

Login with GitHub OAuth API using PHP

December 15, 2019
11
Accessing Webcam and Capture Image using HTML5 and JavaScript

Accessing Webcam and Capture Image using HTML5 and JavaScript

December 30, 2019
11

Popular Stories

  • Ajax Pagination with Search and Filter in PHP

    Ajax Pagination with Search and Filter in PHP

    0 shares
    Share 0 Tweet 0
  • Autocomplete Textbox with Multiple Selection using jQuery in PHP

    0 shares
    Share 0 Tweet 0
  • Image Gallery CRUD with PHP and MySQL

    0 shares
    Share 0 Tweet 0
  • One Time Temporary Download Link with Expiration in PHP

    0 shares
    Share 0 Tweet 0
  • Create PDF with Watermark in PHP using Dompdf

    0 shares
    Share 0 Tweet 0
  • 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