Playing Video

There are no significant differences between accessing and playing video files versus audio files. Video files can be downloaded from the Web for local playback. Files in AVI and MPG formats are the most common types for downloads. Video files in WMV format can be streamed from a media server. These can be live broadcasts or digitized files for on-demand retrieval.

Linking and Embedding Video Files - TOP

A video file is downloaded by creating an <a> link with the URL to the file. The file is downloaded and opened in the external Media Player in the same fashion as for audio files. A link connects to a WMV video file appearing in the same directory as this Web page. When the link is clicked, the file would open in the external Media Player. The exact manner in which the Media Player appears on your desktop depends on how it is configured.

An example of how this would be coded is shown below. The href attribute of the  <a>  tags surrounding both the graphic image and text are URLs for the local WMV video file.

    <a href="casablanca.wmv"><img src="casablanca.gif" alt="Casablanca"/></a>
    <a href="casablanca.wmv">Casablanca.wmv (484 KB)</a>

Listing 9-8. Code to link to video file.

Accessing and Embedding Video Streams

In modern web development, adding video to a webpage is straightforward and no longer requires external plugins like Flash or Windows Media Player. Depending on where the video is hosted, you will generally use one of two methods: embedding a third-party player (like YouTube or Vimeo) using an <iframe>, or hosting the video yourself and using the native HTML5 <video> element.

Embedding Third-Party Video Streams

The most common way to display streaming video is by linking to content hosted on dedicated video platforms. These services handle the complex video compression and streaming protocols for you.

Instead of hunting for a direct media URL in a player's properties, modern platforms provide an "Embed" option (usually found under the "Share" button). This generates an <iframe> tag that you can copy and paste directly into your HTML.

Figure 9-10 Embedding a streamed YouTube video.

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VsvaFxkXrbg" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen>
</iframe>

Listing 9-11. Code to embed a third-party streaming video.

Note on Permissions: Many web-based video files have viewing restrictions or copyright protections. Always ensure you have the right to embed a video. If a video creator disables embedding, the <iframe> will display a message directing the user to watch it on the host platform instead. Additionally, URLs can change or videos can be taken down, resulting in broken links over time.

Using the HTML5 <video> Element

If you have direct access to the video file (e.g., an .mp4 or .webm file) and are hosting it on your own server, you should use the native HTML5 <video> element. This tells the browser to use its built-in media player, completely eliminating the need for third-party plugins.

To ensure your video plays across all browsers, it is best practice to provide multiple video formats using the <source> tag, as well as fallback text for older browsers.

The controls attribute is particularly important, as it automatically provides the user with play, pause, and volume buttons.

Live Video Streams (HLS and DASH)

Live streaming has evolved significantly. Today, live streams are typically delivered using protocols like HLS (HTTP Live Streaming) or MPEG-DASH.

While Apple's Safari browser can play HLS streams natively through the standard <video> tag, most other browsers require a lightweight JavaScript library (such as hls.js or video.js) to interpret the live stream data. If you are integrating live broadcasts, you will usually embed an <iframe> from a live-streaming provider (like Twitch or YouTube Live) or use one of these JavaScript libraries alongside the <video> element to handle the feed.

TOP | NEXT: Third Party Content