Video Object

To achieve effective video integration, developers need to understand how videos interact with the browser and the Document Object Model (DOM). In this guide, we will explore the key aspects of the Video Object, focusing on its interaction with the browser and its integration into the DOM.

Embedding videos in HTML

Embedding videos in HTML is the first step to integrating them into a web page. To add a video on the web page you need to use a tag <video>.

<video src="video.mp4" controls></video>

There are the following special attributes for the <video> tag:

• autoplay. This attribute automatically starts playing the video as soon as the page loads. It is particularly useful when you want the video to start without any user interaction.
• controls. Displays the default set of playback controls for the video, such as play, pause, volume, and progress bar. When this attribute is present, users can interact with these controls to control the playback of the video.
• width and height. These attributes specify the width and height of the video display area in pixels. They allow you to define the dimensions of the video element on the webpage.
• src. Specifies the URL or relative path to the video file. It indicates the location from which the browser should fetch the video file.
• preload. Determines whether the video should be preloaded when the webpage loads. It allows you to specify if and how much of the video file should be preloaded.
• poster. Sets an image that is displayed as a placeholder before the video starts playing. It can be used to provide a preview or thumbnail image for the video.
• controlslist. Specifies the set of playback controls to be displayed. It allows you to customize which controls should be visible to the user.
• crossorigin. Allows you to specify the CORS (Cross-Origin Resource Sharing) behavior for the video element. It is used when loading videos from different domains.
• disablepictureinpicture. Disables the picture-in-picture functionality for the video. It prevents the video from being displayed in a small overlay when the user navigates away from the page.
• disableremoteplayback. Disables the remote playback feature for the video. It prevents the video from being controlled by a remote device, such as a media control on a smartphone or a smart TV.
• loop. Enables continuous looping of the video. When this attribute is present, the video restarts automatically after reaching the end.
• muted. Sets the video to be muted by default, meaning it plays without sound. Users can still unmute the video using the controls if the controls attribute is present.
• playsinline. Allows videos to play inline within the webpage on supported iOS devices, instead of playing in fullscreen mode.

Video object methods

To create interactive video experiences, we can utilize JavaScript to control video playback, manipulate properties, and respond to user interactions.

To access a video object:

const video = document.getElementById("myVideo");

Let's explore some of the commonly used Video Object methods:

1. play(): The play() method starts or resumes the playback of the video.

var video = document.getElementById("myVideo"); 
video.play(); 

1. pause(): The pause() method pauses the currently playing video.

var video = document.getElementById("myVideo");
video.pause();

1. load(): The load() method reloads the video element and resets the playback to the beginning.

var video = document.getElementById("myVideo");
video.load();

1. canPlayType(): The canPlayType() method checks if the browser can play a specific type of video file. It returns a string indicating the supported video formats.

var video = document.getElementById("myVideo"); 
var canPlay = video.canPlayType("video/mp4"); 
console.log(canPlay); // "maybe" or "probably" or "" 

1. currentTime: The currentTime property represents the current playback time of the video in seconds. It can be read or updated to get to a specific time in the video.

var video = document.getElementById("myVideo"); 
console.log(video.currentTime); // Current playback time 
video.currentTime = 30; // Seek to 30 seconds

1. duration: The duration property represents the total duration of the video in seconds. It provides the length of the video file.

var video = document.getElementById("myVideo"); 
console.log(video.duration); // Total duration of the video 

1. volume: The volume property represents the audio volume of the video, ranging from 0.0 (silent) to 1.0 (maximum volume).

var video = document.getElementById("myVideo"); 
video.volume = 0.5; // Set volume to half

1. mute(): The mute() method mutes the audio track of the video.

var video = document.getElementById("myVideo"); 
video.muted = true; // Mute the video 

1. unmute(): The unmute() method unmutes the audio track of the video.

var video = document.getElementById("myVideo"); 
video.muted = false; // Unmute the video 

1. requestPictureInPicture(): The requestPictureInPicture() method requests the browser to enter Picture-in-Picture (PiP) mode, allowing the video to be displayed in a small overlay while the user interacts with other content.

var video = document.getElementById("myVideo"); 
video.requestPictureInPicture();

Conclusion

In this guide, we've explored the key aspects of integrating videos into web pages, focusing on their interaction with the browser and the DOM. We've learned how to embed videos in HTML using the <video> element and control their playback using JavaScript. By combining these techniques, front-end developers can create engaging video experiences that enhance user interactions on the web.