Intro to HTML: Media

Quick Copy Boxes

HTML media includes pictures, videos and music. In this lesson, you will learn to include image, video, and audio files. It may be helpful to review File Path. The src attribute, as shown in this lesson, is either set to a web address or a file location. It is important to specify the correct file location (URL).

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Media helps engage the people who view your applications. Imagine a website with no pictures or a viedo game without sound? To build sucessful pages, you will need to be familar with differnt media types.

Image Tag


<img src =  'http://i67.tinypic.com/f5buo2.jpg' > 
            

<img Start Image Element
src = Attribute you set to the image location
'http://i67.tinypic.com/f5buo2.jpg' This can be a web adress to where the file is uploaded, or a file location
> End Element


Audio Tag


<audio controls>
<source  src='sound.mp3' type='audio/mpeg'>
</audio> 
            

<audio controls> This is an audio element and is it will include audio play controls.
<source The source tells about our file
src='sound.mp3' It is located at sound.mp3
type='audio/mpeg'> The file type is audio/mpeg
</audio> End Audio element


Video


<video controls>
 <source src='video.mp4' type='video/mp4'>
 <source src='video.ogg' type='video/ogg'>
This video is not supported by your browser.
</video>

<video controls> - Video Element with controls (play, pause, ect)
 <source src='video.mp4' type='video/mp4'> - The file is located at video.mp4 and the file type is video/mp4
 <source src='video.ogg' type='video/ogg'> - If the user's browser does not support the first listed source (mp4), then it will try to play the next listed source (ogg)
This video is not supported by your browser. - If the browser does not load any listed source (doesn't play mp4s or oggs), the text option will display.
</video> - End video element


Video in iframe


<iframe  width='560' height='315'  src='https://www.youtube.com/embed/5lxNtFfFxE8'> </iframe> 
            

<iframe - This is an iframe element
width='560' height='315' - We have specified the display size. The video will display with a width of 560 px and a height of 315 px.
src='https://www.youtube.com/embed/5lxNtFfFxE8'> - This is a YouTube video located at that web address.
</iframe> - End iframe Element

iframes are used to display many types of media. They are useful when you use a video link, instead of hosting the video on your server. YouTube provides the iframe code to copy and paste into your page. However, there are times you will want to alter the attributes. Below is an example of an iframe element that contains a YouTube link.


Setting Height and Width


<!-- Video Example-->
<video width= '300' height= '200' controls>
 <source src='video.mp4' type='video/mp4'>
</video>
<!-- Image Example-->
<img src = 'image.jpg' width= '300'>

✶ The height and width are measured in pixels (px). So if the height attribute is set equal to 200, the element with display with a width of 200 px.

✶ Sometimes you may only want to adjust the width of an element to keep it to scale. If you adjust the height and width, pictures can end up looking funny. But maybe that is the look you are going for!


Media & Front-end Design

If you ever do front-end development (or design), it will be important to consider what is appropriate for the client and the user experience. A front-end developer is essentially a developer who works on the user's end of an application. In some situations, certin media types will not be appropriate.

Example: Web Tutorial

Let's use this website as an example. When I was designing it, I thought about the needs for the people who might visit. I also thought about things I liked and disliked about online programming tutorials. The thing I hate the most is clicking on a page and a video or video ad plays. I am usually in a quiet place, working or studying. Unforsen sound can be a distraction or even inappropriate for the user's location. When I link video turtorials, I will make sure they are clearly labled and placed so it probably won't be accidentally clicked.

Example: Online Browser Game

Even on an online browser game, it is smart to have the first page load with no sound, then give the player the option to turn sound on/off. People tend to use the internet at work and in public places.
However, if the game targets young children, like a 3 year old, you might want sound or video to automatically play. Three year olds can not read and they like to be entertained. They also don't usually work and are not expected to be quiet in most public places.

Load Time

Also, consider the load time. What internet speed do you think the users will have access to? There is a wide variety of internet speed with different avilability and pricing. The location and income rage of your users can help you figure out how most people will view your site. The more media on a page, the longer it will take to load. Also, the higher the resolution of an image or video, the slower it will load. You will probably also want to consider the resolution of the devices used to go to your page.
*** After we learn CSS and JavaScript you will be able to better manipulate the media elements. This will allow you to better enchance the user's experience.



Intro to LAMP:

What is LAMP Stack?


If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE





How to be a Great Programmer:

Commander Candy Vlog



Watch the Coding Commanders LAMP Animation:

Coding Commanders: Episode 1



Intro PHP Playlist:

Intro to PHP

Applied Assignment

Background: You were just hired by Coding Commanders as a front-end developer. Your first assignment is to touch up an informative page. The code for this page is located in the code editor box below.
Assignment: Commander Candy has given you a to do list. Change the page to reflect each description.
Example Description: Add an audio file to the page. Make sure you include the audio controls.

Example Code:


<audio controls>
 <source src='worldsCollide.mp3 'type='audio/mp3'>
</audio>

Descriptions:
1) Make the video bigger
2) Change the images to have a width of 600
3) Add another media element.

Next, play around with the code below. Feel free to create your own web page that includes media elements..