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.
<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 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 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
<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.
<!-- 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!
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.
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.
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.
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.
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.
<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..