Working with the Iframe, Video, Audio, Track, and its Sources.
NOTE: for the purpose of this information, a value pair attribute looks like this: name="value". However, a Boolean value attribute looks like this: controls. A Boolean value is a data type that represents one of two values; true or false.
<iframe></iframe> Element
An Iframe is used to embed one website within another website. In other words, the frame will be located on website A, but the contents of the frame will display the information from website B.
<iframe>
</iframe>Iframe attributes
- src – Specifies the url or location of the other website that will be embedded. src=”URL”
- srcdoc – HTML content of the page to show in the frame. srcdoc=”HTML”
- name – the name given to the element. name=”TEXT”
- allowfullscreen – Can be activated to take advantage of full screen mode. (Boolean attribute)
- allowpaymentrequest – Whether to allow payment request through the Payment API. (Boolean attribute).
- height – how high should the frame be? (height=”300″)
- width – the width of the frame (width=”300″).
- loading – tells the browser to load the frame immediately or to delay loading the iframe until certain conditions are met.
<iframe height="300" width="600" src="https://www.someurl.com/index.html" allowfullscreen="true">
</iframe><video></video> Element
The video element is used to embed videos in a web page. This element can use multiple sources to attempt and use the best format based on the browser attempting to display the video.
How does it work? The video element will have multiple source elements inside of the element. The browser will attempt from the top down the first source. If the browser is unable to play that source, then the browser will skip to the next source and attempt to play that video. If that video doesn’t play it will continue doing this until it runs out of sources. Once all sources are exhausted in attempts, the message will be displayed. The text just below the sources will only be displayed if all sources fail to play.
Example:
<video width="300" height="600" controls>
<source src="movie1.ogg" type="video/mp4">
<source src="movie2.mp4" type="video/ogg">
The browser was unable to play any of these video types.
</video>Attributes for video element
- width – sets the width of the video player (in pixels). width=”300″
- height – sets the height of the video player (in pixels). height=”300″
- autoplay – specifies if the video control should be played. Boolean attribute
- loop – specifies if the video should be played in a loop. Boolean attribute.
- controls – tells the browser to display the video controls such play, pause, volume and fast forward. controls=”control”
- muted – specifies whether to mute the video or not. Boolean attribute
- poster – provides the option of a image to be shown while the video is downloading. poster=”URL”
- preload – how the page should load the video and when it should be loaded.
- src – the URL of the video to play.
<audio></audio> Element
The audio element works similar to the video element in the since that it can too have multiple sources with an error message or warning. The process of playing the audio files works the same as the video file; the browser will try to play each audio file from the top down to see which one will play. If all the audio files fail to play, then the text will be used to display a message on the browser.
<audio controls>
<source src="URL" type="audio/mpeg">
<source src="URL" type="audio/ogg">
We were unable to play your audio file.
</audio>Audio Attributes
- autoplay – a Boolean attribute that signifies that the audio will start playing as soon as possible. (Boolean Attribute)
- controls – a Boolean attribute that signifies that the audio controls should be displayed. (Boolean Attribute)
- loop – a Boolean attribute that signifies that the audio will start over again on its own. (Boolean Attribute)
- muted – a Boolean value that defines if the audio should be muted. (Boolean Attribute)
- preload – how the page should preload the audio.
- src – the location of the audio file. src=”URL”
<track> Tag
This tag defines a track to be played for an audio or video element. The track tag is placed inside of the video or audio file and tells the browser which track to play with them.
Track Attributes
- default – enable if preferences don’t override. (Boolean Attribute)
- kind – specifies the kind of track. kind=”vtt”
- label – the title of the track. label=”text”1
- src – specifies where the track is located src=”URL””
- srclang – the language of the track. scrclang=”lang”
<audio controls>
<source src="URL" type="audio/mpeg">
<source src="URL" type="audio/ogg">
<track src="URL" kind="subtitles" srclang="en" label="English">
We were unable to play your audio file.
</audio><source> tag
The source tag is used to define the location of multiple sources in the audio or video elements. This void tag will state where the actual file is located. The video and audio element can have as may sources are formats are available.
<audio controls>
<source src="URL" type="audio/mpeg">
<source src="URL" type="audio/ogg">
<track src="URL" kind="subtitles" srclang="en" label="English">
We were unable to play your audio file.
</audio>Source Attributes
- src – the location of the audio or video src=”URL”.
- type – specifies the mime type. type=”MIME-type”
- media -the media query that sometimes is defined in CSS.
