Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the author of Defining Video Display and Play Parameters

Defining Video Display and Play Parameters

The HTML5 Video controller is rather minimalist. It displays a play button, a pause button, and a mute button, as well as a scrubber (a horizontal bar with a movable thumb) that the viewer can use to fast-forward or move manually throughout the video playback. That set of controls appears only when the visitor hovers the mouse pointer over the video, or when the video begins to play.

In addition to displaying a controller, other useful HTML5 Video parameters are autoplay, loop, and preload: autoplay launches the video immediately when the page is opened. loop plays the video over and over. preload begins downloading the video when the page is opened, even before the Play button is clicked. This feature isn't necessary (or available) if you enable autoplay, but is useful when autoplay is not enabled. Preloading allows the video to play more quickly when the visitor clicks the Play button in the player.

Enabling Autoplay

To enable autoplay, place your cursor after this code:

controls="controls"

Press the spacebar to activate HTML5 code hints. Double-click autoplay to add this code:

autoplay=""

You don't need to enter anything between the quotation marks in the code (such as "true" or "false"). Simply adding the autoplay code enables autoplay.

Enabling Looping

To enable looping, place your cursor after this code:

controls="controls"

You can do this whether or not you enabled autoplay. Press the spacebar to activate HTML5 code hints. Double-click loop to add this code:

loop="loop"

Preloading the Video

To preload the video, place your cursor after this code:

controls="controls"

You can do this whether or not you enabled any other parameter(s). Press the spacebar to activate HTML5 code hints. Double-click preload and then double-click auto to add this code:

preload="auto"
  • + Share This
  • 🔖 Save To Your Account