Design Template by Anonymous

Time-Based Media

Features

Now that we've seen the different styles we can look at the features or attributes that make the media appear unique. Coding a video into a web page is fairly straightforward. One way to do it is by adding a video tag.

Here is an example of the simpliest code:

          
            <!DOCTYPE html>
            <html>
            <body>
              <video src="movie.mp4" width=500 height=300></video>
            </body>
            </html>

However, while the video is now in the web page, you can't play it. At this stage it is essentially just an image.

Bad example

Controls:

          
            <!DOCTYPE html>
            <html>
            <body>
              <video src="movie.mp4" width=500 height=300 controls></video>
            </body>
            </html>

Just by adding the attribute "controls", we can now watch the video. In addition, controls also allows the video to be in a different speed, paused, and presented full screen.

Good example

More attributes:

          
            <!DOCTYPE html>
            <html>
            <body>
              <video src="movie.mp4" width=500 height=300 controls autoplay muted loop></video>
            </body>
            </html>

Similar to controls, HTML makes it very easy to add other features such as autoplay, muted, and loop. All of these should be intuitive.

Additional attributes have been added to the video

Poster:

          
            <!DOCTYPE html>
            <html>
            <body>
              <video src="movie.mp4" width=500 height=300 controls muted loop
              poster="image.png"></video>
            </body>
            </html>

An option to make your media stand out more is to put a poster over the video. This can be effective at grabbing the user's attention to the video. Simply set the image file name equal to "poster" and it will cover the video. It should be known that if the video as the autoplay attribute applied then the poster won't be shown.

Add a poster to cover the video