Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

How to add a video to a website

Thursday, December 5th, 2013 by Servage

I guess it’s about time we got to the markup for adding a video to a web page. Let’s start with an example that assumes you are designing for an environment where you know exactly what browser your user will be using. When this is the case, you can provide only one video format using the src attribute in the video tag (just as you do for an img). The below example shows a movie with the default player in the Chrome browser. We’ll look at the other attributes after the example.

<video>...</video>
Adds a video player to the page

video

<video src="highlight_reel.mp4" width="640" height="480"
poster="highlight_still.jpg" controls autoplay>
</video>

There are some juicy attributes in that example worth looking at in detail.

width="pixel measurement"
height="pixel measurement"

Specifies the size of the box the embedded media player takes up on the screen. Generally, it is best to set the dimensions to exactly match the pixel dimensions of the movie. The movie will resize to match the dimensions set here.

poster="url of image"

Provides the location of a still image to use in place of the video before it plays.

controls

Adding the controls attribute prompts the browser to display its built-in media controls, generally a play/pause button, a “seeker” that lets you move to a position within the video, and volume controls. It is possible to create your own custom player interface using CSS and JavaScript if you want more consistency across browsers.

autoplay

Makes the video start playing automatically once it has downloaded enough of the media file to play through without stopping. In general, use of autoplay should be avoided in favor of letting the user decide when the video should start.

In addition, the video (and audio) element can use the loop attribute to make the video play again once it has finished (ad infinitum), muted for playing the video track without the audio, mediagroup for making a video element part of a group of related media elements (such as a video and a synced sign language translation), and preload for suggesting to the browser whether the video data should be fetched as soon as the page loads (preload=”auto”) or wait until the user presses the play button (preload=”none”). Setting preload=”metadata” loads information about the media file, but not the media itself. A device can decide how to best handle the auto setting; for example, a browser in a smartphone may protect a user’s data usage by not preloading media, even when it is set to auto.

object and embed

The object element is the generic way to embed media such as a movie, Flash movie, applet, even images in a web page. It contains a number of param (for parameters) elements that provide instructions or resources that the object needs to display. You can also put fallback content inside the object element that is used if the media is not supported. The attributes and parameters vary by object type and are sometimes specific to the thirdparty plugin displaying the media.

Resources and further reading

Microsoft

Web Monkey

How to add a video to a website, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.