Chapter 14 - Videos, Audio and Marquees
Adding HTML 5 Video or iFrames to your web page
Helpful Links about Videos/iFrames
CODE FOR MP3
<embed height="50" width="100" src="dearlybeloved.mp3">
Videos can be embedded in HTML pages with several methods. - BEST TO OPEN IN CHROME
Playing Videos in HTML Example if YOU have the SOURCE FILE.
<video width="320" height="240" controls>
<source src="movie.mp4" >
<source src="movie.ogg" >
<source src="movie.webm" >
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
BUT not all browsers will recognize these formats/methods due to capabilities with video formatting such as Flash players, etc.
The best solution is to use the HTML5 using the following "skeleton" code:
<video> element + the <embed> element.
<video width="320" height="240" controls>
<source src="movie.mp4" >
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240"> //This is done for Flash files.
</object>
</video>
HTML Video - Using A Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to a Flash video. If a user clicks on the link, the browser will launch a helper application to play the file:
Example <a href="intro.swf">Play a video file</a>
Helpful Links about Videos/iFrames
- MORE ABOUT Video Tags
- Embedding Audio and Video
CODE FOR MP3
<embed height="50" width="100" src="dearlybeloved.mp3">
Videos can be embedded in HTML pages with several methods. - BEST TO OPEN IN CHROME
Playing Videos in HTML Example if YOU have the SOURCE FILE.
<video width="320" height="240" controls>
<source src="movie.mp4" >
<source src="movie.ogg" >
<source src="movie.webm" >
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
BUT not all browsers will recognize these formats/methods due to capabilities with video formatting such as Flash players, etc.
The best solution is to use the HTML5 using the following "skeleton" code:
<video> element + the <embed> element.
<video width="320" height="240" controls>
<source src="movie.mp4" >
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240"> //This is done for Flash files.
</object>
</video>
HTML Video - Using A Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to a Flash video. If a user clicks on the link, the browser will launch a helper application to play the file:
Example <a href="intro.swf">Play a video file</a>
Adding Video
Adding YouTube Videos
Playing a YouTube Video in HTML If you want to play a video in a web page, you can upload the video to YouTube In YouTube, Find the "SHARE" link. From there you can click on "EMBED" and YouTube will give you the code, just hit command+C to copy the code and put in your HTML. HOWEVER, please note that YouTube's code is incorrect... for some reason they do not put "http://" after their src attribute, this is their error. The proper HTML code to display the video:
Example - YouTube iFrame
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Example - YouTube embed
<embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k">
</embed>
Helpful link
Example - YouTube iFrame
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Example - YouTube embed
<embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k">
</embed>
Helpful link
Audio
Very similar to videos. You can embed or "object" your audio clips into your HTML. These files need to be in your folder on your computer.
Helpful Link
Sample Code:
<embed height="50" width="100" src="horse.mp3">
Helpful Link
Sample Code:
<embed height="50" width="100" src="horse.mp3">
Marquees... aka "Scrolling Text"
Helpful Links:
Scrolling text, helps coders use specific text to make an impact to it's audience. The text is often short statements that the coder wants the public to know about or see.
Example - Marquee
<marquee behavior="scroll" direction="up">
Your upward scrolling text goes here
</marquee>
Here is a link to see some of <marquee> attributes:
PAGE 1 OR
PAGE 2
Example - Marquee
<marquee behavior="scroll" direction="up">
Your upward scrolling text goes here
</marquee>
Here is a link to see some of <marquee> attributes:
PAGE 1 OR
PAGE 2
ASSIGNMENT
- Create 1 HTML and 1 CSS
- Put in Folder CH14
- You need to include the following:
- 1 video that you create and embed or put into your page
- 1 video that you get from YouTube using <iframe>
- 1 mp3 music or audio clip. Do a search fro FREE downloadable music.
- 1 marquee that you put in a float or "side" area
- jello margins (HINT: margins auto)
- background color and H1 or H2
- 100 words explaining your theme or videos, etc