4. Adding a video to a page


          Before HTML5, to have a video play on a webpage, you would need to use a plugin like Adobe Flash Player. With the introduction of HTML5, you can now place videos directly into the page itself.

          The HTML <video> element is used to embed video in web documents and may contain one or more video sources, represented using the src attribute of the source element.

          Refer to the sample code below to know on how to embed a video file: 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The HTML5 video Tag</title>
</head>
<body>
   <video width="640" height="480" poster="posterpic.jpg" controls>
      <source src= "https://download.blender.org/peach/trailer/
      trailer_400p.ogg" type="video/ogg">
      
      <source src= "https://download.blender.org/peach/trailer/
      trailer_400p.mp4" type="video/mpeg">
      
      Your browser does not support the video element. Kindly update
      it to the latest version.
   </video>
</body>
</html>


This will produce the following result:

 
Video is from the Big Buck Bunny (https://peach.blender.org/trailer-page/

          All modern browsers support the <video> element but not all browsers support the same video file format. MP4 files are the most widely accepted format while other formats like WebM and Ogg are supported in Chrome, Firefox, and Opera.

          To ensure a video plays in most browsers, it's best practice to encode them into both Ogg and MP4 formats and include both in the <video> element like in the example above. Browsers will use the first recognized format. If, for some reason, the browser does not recognize any of the formats, the text "Your browser does not support the video element. Kindly update it to the latest version" will be displayed instead.

Let us discuss in detail some of the attributes used in the above given example:

width="npx"
height="npx"

          Indicates the estimate of the box the inserted media player takes up on the screen. By and large, it is best to set the measurements to precisely coordinate the pixel measurements of the movie. The movie will resize to coordinate the measurements set here.

poster=“url of image"

          Gives the location of a still picture to utilize in place of the video before it plays.

controls

          Including the controls attribute prompts the browser to show its built-in media controls, by and generally a play/pause button, a “seeker” that lets you move to a position inside the video, and volume controls. Custom player interface can be made utilizing CSS and JavaScript for consistency over browsers. How to do that is beyond the scope of this module but is explained in the given link: https://freshman.tech/custom-html5-video/

autoplay

          Causes the video to automatically start playing once it has downloaded enough of the media file to play through without stopping. However, autoplay should be avoided to let the user decide when the video should start.

          The video and sound component can utilize the loop property to replay the video until it is muted. To play the video track without audio, the element parts of the media group (like a video and synchronized sign language interpretation) should to preload to tell the browser whether the information should be recovered as before long as the page loads. (preload=”auto”) is retrieved or hold up until the play button is pressed by the user (preload=”none”). Assigning preload=”metadata” loads media file information, but not the media themselves. To manage the auto setting can be determined by a device. For example, the browser on a smartphone set to auto, even without preloading media, will protect the use of data by the user.