Home Snippets Projects Donate

Get Snippets For:

   Java    HTML/CSS JavaScript

Videos

Code Description:

Videos can be easily incorporated into a web page with the <video> tag. You can specify the "width" and "height" attributes to determine the size of your video frame. Within the <video> tag, the <source> tag is placed which is used to specify where the video file is located and what format. Multiple <source> tags can be placed in the <video> tag. If the first source is not supported by the browser, it will move on and try the next. You can place text within the <video> tag which will display if none of the source elements work.

The "controls" attribute determines if the Pause/Play, Sound, and Full Screen controls are visible. The "autoplay" attribute determines if a video will being to play once loaded. Autoplay is a desktop-only feature.

There are three video formats that are permitted:

If you would like to download our incredibly annoying sample video, it is provided here:

Download - myVideo.mp4

Video with Controls Syntax:

<video width="500" height="300" controls>
   <!-- Only one source is required. Multiple sources allow for a better chances of videos working on all browsers -->
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.ogg" type="video/ogg">
   <source src="myVideo.webm" type="video/webm">
Video tag not supported in this browser
</video>

Video without Controls Syntax:

<video width="500" height="300">
   <!-- Only one source is required. Multiple sources allow for a better chances of videos working on all browsers -->
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.ogg" type="video/ogg">
   <source src="myVideo.webm" type="video/webm">
Video tag not supported in this browser
</video>

Autoplay Video Syntax:

<video width="500" height="300" autoplay>
   <!-- Only one source is required. Multiple sources allow for a better chances of videos working on all browsers -->
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.ogg" type="video/ogg">
   <source src="myVideo.webm" type="video/webm">
Video tag not supported in this browser
</video>

Runnable Comment Example Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Video Example</title>
    </head>
 
    <body>
       
       <video width="500" height="300" controls>
          <!-- Only one source is required. Multiple sources allow for a better chances of videos working on all browsers -->
          <source src="myVideo.mp4" type="video/mp4">
          <source src="myVideo.ogg" type="video/ogg">
          <source src="myVideo.webm" type="video/webm">
          Video tag not supported in this browser
       </video>

    </body>
</html>

How to Run This Code:

Simply paste this code into a plain text file with the ".html" extension and save it. You will then be able to open it in the web browser of your choice. Make sure to download our sample video file and have it in the same folder as the HTML file.

Related Links: