Learning the HTML5 Video Element

August 5, 2018 3 Comments

To render the media One key challenge has often been dependence on a third-party object integrated with the browser. Two new elements <video> and <audio> added to the HTML5 specification that works with multimedia natively in the web browser and with JavaScript. In this post, I will examine video element to learn its functionalities.

<video> element

video element provided by the HTML5 standard and look at the available attributes and events you can use to control video either through static HTML, or use with JavaScript. A simple video markup element looks like

<video src="samplevideo.mp4" autoplay> </video>

Attributes available on the <video> element

Attribute Description If omitted
src This attribute specifies the video to play. It can be a local resource within your own website or something exposed through a public URL on the Internet you can also use child <source> element to specify the video source
height  width To control the amount of space the video will occupy on the page Absence of this causes the video to display in its native size.
autoplay Tells the browser to start playing the video as soon as it loads. If omitted, the video plays only when told to through player controls or JavaScript.
controls Tells the browser to include its built-in video controls, such as play and pause. The absence of this causes no visible way to play the content. You would use autoplay or provide some other mechanism through JavaScript to play the video.
loop Tells the browser to continuously play the video after it completes If omitted, the video stops after it plays through completely.
poster This specifies an image to show in the place allocated to the video until the user starts to play the video. Use this when you’re not using autoplay. It’s very useful for providing a professional image or artwork to represent the video. If not added, the poster appears in the first frame of the video.
preload Specifies if and how the author thinks the video should be loaded when the page loads
muted Specifies that the audio output of the video should be muted
crossorigin This enumerated attribute indicates whether to use CORS to fetch the related image.
playsinline A Boolean attribute indicating that the video is to be played “inline”, that is within the element’s playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

 

Fallback

The <video> element supports multiple <source> elements; so developer can include one for each video type. To show the information for the user’s browser that doesn’t support this video.

<video controls height="400" width="600" poster="picture.jpg">
   <source src="samplevideo.ogv" type="video/ogg"/>
   <source src="samplevideo.mp4" type="audio/mp4"/>
   <object>
      <p>Video is not supported by this browser.</p>
   </object>
</video>

This sample above removed the src attribute from the <video> element and added child <source> elements instead. A browser goes through the <source> elements from top to bottom and plays the first one that it supports.
Notice that the example also has an <object> element to cover the possibility that the client browser has no support for the <video> element at all.

If the browser supports the HTML5 video element, it doesn’t show the fallback. In this case, make sure that the valid <source> element has been specified for that browser. If not, then the video container shows an error in place of the control bar, saying that “An invalid link or file is specified”.

 

Accessing through Javascript

The<video> element offers many methods. Methods and properties on the video object are

play() Plays the video from its current position.
pause() Pauses the video at its current position.
volume Allows the user to control the volume of the video.
currentTime Represents the current position of the video. Increase or decrease this value to move forward or backward in the video.
addTextTrack() Adds a new text track to the audio/video
canPlayType() Checks if the browser can play the specified audio/video type. Returns “probably”, “maybe” or empty “”

<script>
 var video;
 window.onload = function () {
  video = document.getElementById("sampleVideo");
 }
 function play() {
  video.play();
 }
 function pause() {
  video.pause();
 }
 function back() {
  video.currentTime -= 10;
 }
</script>
Sample javascript to show uses of <video> object

 Next

To get information about browser supports or more details you can check w3School HTML5 Video  Another good resource is MDN Docs – <video>: The Video Embed element

References

3 thoughts on “Learning the HTML5 Video Element”

  1. Hey there! Do you use Twitter? I’d like to follow you if that would be okay.

    I’m definitely enjoying your blog and look forward to new updates.

    Reply

  2. Wow, marvelous blog layout! How long have you been blogging
    for? you make blogging look easy. The overall look of your site is great, as well as the content!

    Reply

  3. Hey there just wanted to give you a quick heads up.
    The words in your article seem to be running off the screen in Opera.

    I’m not sure if this is a formatting issue or something to do with internet browser compatibility
    but I figured I’d post to let you know. The design look great though!
    Hope you get the issue solved soon.

    Reply

I would like to hear your thoughts