Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display video control in HTML5?
HTML has embed, object, and iframe tags to display the video control in HTML5. Sometimes we would like to watch a video and pause the video with the stop button but we don’t know what exactly happens to it. The boolean attribute is defined as controls and the attribute includes play, pause, volume, track, fullscreen mode, and subtitle ON/OFF.
Visual Representation
Syntax
The following syntax is used in the examples are −
<video controls> <source src = "paste the path of video" type = "video/mention the type format" > </video>
The video element is used to display the video in an HTML document. The source element has src attribute that allows the user to paste the link/path of the video. The type attribute is used to mention the type of video format. For example- mp3, mp4, wav, etc.
<embed src="https://www.youtube.com/embed/G3pdpsJxE-A?controls"></embed>
The embed element is used to insert external sources like pdf, audio, and video.
<object data="https://www.youtube.com/embed/3giyUDx2Yik?controls"></object>
The object element performs the same functionality w.r.t to embed tag and it is also used to insert the external sources.
Properties Used
The following properties used in the examples are −
height − This attribute defines the height of the video.
width − This attribute defines the width of the video.
color − This attribute defines the color of the text.
font-weight − This attribute defines the text as bold.
Example 1
In the following example, we will use a video element that sets the attribute controls. This attribute defines the all features in the output of the webpage like volume ON/OFF, play, pause, etc. Then set the attribute height and width of the video that represents the better length from both sides of horizontal and vertical.
<!DOCTYPE html>
<html>
<title>Video tag to display the video controls</title>
<body>
<center>
<h1>Tutorialspoint</h1>
<video width="420" height="240" controls>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
Example 2
In the following example, there will be a use embed element that sets the three attributes- src(to paste the link and mention ?controls at the end of the link ), height, and width to sets the better length of the video.
<html>
<title>Video controls using embed element</title>
<body>
<center>
<h1>Tutorialspoint</h1>
<embed src="https://www.tutorialspoint.com/videos/sample720.mp4?controls" height="320px" width="500px"></embed>
</center>
</body>
</html>
Example 3
ln the following example, we will use the new trend element i.e. object that can be used to display the video controls in HTML. This element has an attribute named data that store the link/path of the video and along with some attributes like height and width which sets better visibility of the video by covering the good length.
<!DOCTYPE html>
<html>
<title>Display the video control using </title>
<body>
<center>
<h1>Tutorialspoint</h1>
<object data="https://www.tutorialspoint.com/videos/sample720.mp4?controls" height="320px" width="500px"></object>
</center>
</body>
</html>
Conclusion
We explored the three different tags by displaying the video controls in HTML. In the first example, we only displayed the video from the iframe tag. In the same second example, we use three different tags namely iframe, embed, and object to display the video by using the ‘controls’ attribute that controls all the video features.
243 Views
To Continue Learning Please Login