CSE 322
Fall 2018
CSUSB

Audio and Video

The current standard of HTML enables one to embed audio and video into a website without using any third-party plugins.

Audio details Rhapsody in B minor, Op. 79 No. 1; composed by Johannes Brahms, performed by Muriel Nguyen Xuan, recorded by Stéphane Magnenat, licensed under CC BY-SA 4.0.

The above audio corresponds to the following HTML code:

<audio controls src="Rhapsody_in_B_minor.ogg">
    <p>HTML audio not supported.</p>
</audio>

controls is an optional attribute that makes the audio controls (play, pause, seek, volume) visible. If not specified, the audio will be loaded but not visible or controllable to the user; this is desirable if one wishes to design a website with background music or user-event-triggered sound effects.

The value of the src attribute is the URI of the audio resource. In this case, the file named Rhapsody_in_B_minor.ogg, a file local to the server hosting this website, is used. The web browser must support at least three standard audio formats: MP3, WAV, and OGG.

The content of the audio element will only be displayed if the audio failed to load: reasons for this could be an unsupported audio format or the web browser not supporting the HTML <audio> tag.

Unless you own the media, it is a good idea to properly attribute the work to it's owner. This audio example includes audio details using the following HTML code:

<details>
    <summary>Audio details</summary>
    <q>Rhapsody in B minor</q>, Op. 79. No. 1; composed by Johannes Brahms, performed by Muriel Nguyen Xuan, recorded by St&eacute;phane Magnenat, licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>.
</details>

In this case, the CC BY-SA 4.0 license allows this audio to be freely distributed under the condition that the owners are properly attributed and the license is made visible.

The details element hides most of it's content while making the content of it's nested summary element visible as a heading; clicking the heading, toggles the visibility of the rest of the content.

The following element embeds the creative commons video Big Buck Bunny:

Video details Big Buck Bunny, © Blender Foundation | www.bigbuckbunny.org, licensed under CC BY 3.0.

The above element corresponds to the following HTML code:

<video controls width="640" height="360" src="Big_Buck_Bunny.mp4">
    <p>HTML video not supported.</p>
</video>

The attributes width and height specify the width and height of the video in pixels. The controls attribute for video, if not present, will still display the video but without any direct way for the user to control it. The standard formats supported for the video src attribute are: MP4, WEBM, and OGG. In the event that the video could not be embedded, the content of the element will be displayed.