How to Embed Media Files Into a Webpage
- 1). Insert the following code in the body of your HTML document to embed an audio file:
<audio src="filename.mp3" controls></audio> - 2). Type the path to and name of your audio file in place of "filename.mp3" in the "src" attribute.
- 3). Add the "preload" attribute with the value "auto" to start loading the file when the page loads, even if the user hasn't played it yet. For example:
<audio src="filename.mp3" preload="auto" controls></audio> - 4). Remove the "src" attribute from the "audio" tag, then add two or more "source" tags between the "audio" tags to allow the browser to choose among different available audio formats to play. With the following code, the browser will select between an OGG audio file and an MP3:
<audio controls>
<source src="filename.ogg" type="audio/ogg" />
<source src="filename.mp3" type="audio/mpeg" />
</audio> - 1). Insert the following code in the body of your HTML document to embed a video file:
<video src="filename.mp4" controls></video> - 2). Type the path to and name of your video file in place of "filename.mp4" in the "src" attribute.
- 3). Specify the width and height of your video in pixels using the "width" and "height" attributes. For example:
<video src="filename.mp4" controls></video> - 4). Add the "preload" attribute with the value "auto" to start loading the video when the page loads, even if the user hasn't played it yet. For example:
<video src="filename.mp4" preload="auto" controls></video> - 5). Remove the "src" attribute from the "video" tag, then add two or more "source" tags between the "video" tags to allow the browser to choose among different available video formats to play. With the following code, the browser will select between an OGG video and an MP4 video:
<video controls>
<source src="filename.ogg" type="video/ogg" />
<source src="filename.mp4" type="video/mp4" />
</video>
If you've specified a width and height for the video, leave those attributes in the "video" tag.
Audio
Video
Source...