Adding Audio and Video Content to Web pages. Audio Content - Add some Audio content to your page. Audio & Video 1

Size: px

Start display at page:

Download "Adding Audio and Video Content to Web pages. Audio Content - Add some Audio content to your page. Audio & Video 1"

Allan Ray
5 years ago
Views:

1 Audio & Video 1 Adding Audio and Video Content to Web pages Create a new page in your Notepad++ and name it 6AV: <!DOCTYPE html> <html> <head> <title>audio & Video</title> </head> <body background="backgrounds/blueswirl.jpg"> </html> <a href="1index.html" >Back to Home Page </a> </body> Then add a heading something like the following: (feel free to change the font-family and colors) <h1 style="text-align:center; font-family:arial bold; background-color:green; color:yellow; border-width:10px; border-style:solid; bordercolor:red;">adding Audio and Video to Web Pages</h1> Audio Content - Add some Audio content to your page The <audio> tag is written as <audio></audio> with any attributes provided within the start tag. Attributes can specify the actual audio file to play, as well as other options such as whether to play automatically, whether the browser should display the controls or not, etc. First, insert an h2 heading with a border of your choice entitled: Audio Activity. (Remember you can copy code from any of your other pages) Then insert your audio content like this: <audio src="media/sundial.mp3" autoplay loop>if you are reading this, it is because your browser does not support the audio element</audio> In this example I have selected an audio file from my media folder to auto play and loop which means the viewer cannot turn it off.

2 Audio & Video 2 If I wish to provide controls for the viewer I would either exchange the attributes autoplay and loop for controls, like this: <audio src="media/sundial.mp3" controls>if you are reading this, it is because your browser does not support the audio element</audio> Or, my favorite option, is to simply add the controls attribute, which would make the audio auto play and loop, but provide the viewer the option to turn it off. Please change your code to look like this (only 1 audio element on your page please): <audio src="media/sundial.mp3" autoplay loop controls>if you are reading this, it is because your browser does not support the audio element</audio> Notice that there is a element within the audio element, which is the fallback content. This is used when the browser does not support the audio element. **NB there is much to learn about audio, but for this module keep it simple and use only.mp3 files for audio content on your webpages as they are well supported. (See some examples in the media folder) You can download royalty free music for websites here: You can create your own music on line here: Centering your Audio Content In order to center your audio content we can use the coding trickery we used earlier (embedding the content inside a paragraph tag and using the text-align property) or we can use the CSS Display property. We will keep it brief, but if you are curious do some research on the CSS property (W3schools is a good website). Inside your audio tag type the CSS Style attribute and add the display property with a value of block and the margin property with a value of 0 (zero) and auto. Written like this: <audio src="media/sundial.mp3" style="display:block; margin: 0 auto;" >

3 Audio & Video 3 Please change your code to look like this (only 1 audio element on your page please): <audio src="media/sundial.mp3" style="display:block; margin: 0 auto;" autoplay loop controls>if you are reading this, it is because your browser does not support the audio element</audio> Your webpage should look similar to the picture below: Video Add your own video content to your webpage The latest version of HTML (i.e. HTML5) makes it extremely easy to add video to a web page. HTML5 allows you to use a <video> tag, which, believe it or not, embeds video right into your web page! First, insert an h2 heading with a border of your choice entitled: Video Activity. **NB: Please note that the video content provided in the media folder for you is in the WMV format and needs to be converted to the MP4 content before it will be displayed in your web browser. There are detailed instructions included below, and in the Photostory module (converting video using MovieMaker). Please convert the sample video using one of these instructions before inserting your video content. Converting Video format using Handbrake Open the Handbrake program by double clicking on the desktop icon Or by typing Handbrake in the search windows When the program opens, select the File, Open a single video file option as shown below

convert and click the Open button as shown below.

4 Audio & Video 4 Open HandBrake and select the File, Open a single video file option Then find the file you want to convert and click the Open button as shown below. Navigate to your.wmv video And select it, then click the Open button

Audio & Video 5 Then choose the location you want to save the new file to (your HTML folder), ensure the settings are correct, then click the start encode button, as shown below, Ensure you select

5 Audio & Video 5 Then choose the location you want to save the new file to (your HTML folder), ensure the settings are correct, then click the start encode button, as shown below, Ensure you select the Fast 1080p setting When the encoding process is finished your new mp4 video will be saved in your folder When the program is finished you should have both the original sample.wmv and a new sample.mp4 movie in your media folder. Make the settings for width 1024 and Then press the Start Encode button Choose a file name and location (Your HTML folder) Ensure MP4 format is selected **NB: If Handbrake is not working, you can convert the video to MP4 using MovieMaker (see instructions in the Photostory module) The HTML 5 <video> tag is used for embedding video into an HTML document. The tag accepts attributes that specify how the video should be played. Any content between the start and end <video> tags is fallback content. This content is displayed only by browsers that don't support the <video> element. The <video> tag is typically written as <video src=""></video> with the URL of the video file inserted between the double quotes of the src attribute. The controls attribute can be specified to provide user controls for the interface (so that the user can stop, start, change the volume, etc). The width and height attributes can also be used to provide the width and height of the video. Like this:

6 Audio & Video 6 <video src="media/sample.mp4" width="250" height="180" controls></video> (Remember to convert your video to the MP4 format & save it to your Media folder see below) **NB there is much to learn about video, but for this module keep it simple and use only mp4 files for video content on your webpages as they are well supported. Of course you can use the display property to center your video on your web page, just like you did for the audio element above. Change your video element to center it on your webpage. More information on video tags: Now add your MP4 file from your PowerPoint module. Open your Powerpoint folder and copy your exported Powerpoint.mp4 file into your Practice/media folder. Then insert it into your AV webpage and center it just like above only replacing the sample.mp4 file name with your Powerpoint file name. Your finished webpage should look similar to the picture below: Have your teacher check your working audio and video and a copy of your PowerPoint.mp4 file and have them mark the Activity Sheet at # 19!

7 Audio & Video 7 Insert an Executable file in HTML Now insert your Activity 5 Visual Basic Application file in your website below the centered video above. Start with a centered h2 heading with a background-color and a border titled Visual Basic Activity To insert an executable file (Visual Basic). You will use the same code as you do for a hyperlink, but instead of a website address you will use the file location of your executable file. (First you will need to open your VB folder and copy your Activity 5 application file to your media folder). Type the following code into your html editor and refresh your page and then you can play your VB activity inside your webpage. <a href = "media/activity5.exe">click Here to Play my Visual Basic Activity</A> Challenge: Center your link Centering links in HTML5 requires CSS programing and because this is beyond the scope of this module we will use some coding trickery. We will use a text element and nest the <a> element within the text element and this will allow us to center everything inside the element on the webpage. (This can be used with other elements too) First we choose a text element and within the start tag we need to ensure the text will be centered between the margins and as you may recall from Styles lesson, we can do this with the text-align property and the center value (see below). Second, we need to nest the <a> element within the text element. All these factors put together look like this (change you code to center your link): <a href = "media/activity5.exe">click Here to Play my Visual Basic Activity</A> Show your teacher your working VB Activity & Have them initial your activity sheet at #20 (VB Activity 5)

Audio & Video 8 Your finished webpage should look similar to the picture below: Taking this trickery to another level let s make a picture link to Leo Hayes website First we choose a text element <p>

8 Audio & Video 8 Your finished webpage should look similar to the picture below: Taking this trickery to another level let s make a picture link to Leo Hayes website First we choose a text element and within the start tag we need to ensure the text will be centered between the margins with the text-align property and the center value. Second, we need to nest the <a> and <img> elements within the text element and place an image in the display text space. Third, we need to center the image with the text and as you may recall from the text and images lesson this is achieved by placing a vertical-align property and a middle value within the style attribute of the img element. All these factors put together look like this (enter this code below your last link): <a href=" the picture to go to the Leo Hayes website.<img style="verticalalign:middle" src="images/smiley.gif" alt="smiley face" width="42" height="42"></a> Using this process see if you can change the link to your index page to include a picture of an arrow. (And have your teacher initial your activity sheet at # 21) Activity 7 Review Questions: (Answer in your Activity sheet at #22!) 1. A hyperlink is: A. a way to change text colors on a Web page. B. a device to take the user to another Web page or site. C. a way to insert images on a Web page. D. a device to create more Web pages.

9 Audio & Video 9 2. To use the words Click Here as a link to take you to the correct HTML code is: A. <a href= > Click here </a> B. <a href= Click here </a> C. <a href= > Click here </a> D. <a ref= > Click here <a> 3. To use the image icecream.gif as a link to take you to icecreamshoppe.com, the correct HTML code is: A. <a href= > <img src= icecream.gif > </a> B. <a ref= <img src=icecream.gif> </a> C. <a href= > <img lnk= icecream.jpg > </a> D. <a href= icecream.gif > <img src= icecreamshoppe.com > </a> 4. To link to a second page within a Web site, second.html, that is in the same folder as the home page, using Page 2 as the link text, the correct HTML code is: A. <a href= > Page 2 </a> B. <a href= Page 2 > Page 2 </a> C. <a ref= second.html > Page 2 </a> D. <a href= second.html > Page 2 </a> 5. Which type of list displays information using bullets: A. <ul> B. <ol> C. <bl> D. <lu> 6. In order to make the music file sundial.mp3 play continuously on a website the following code needs to be placed in the body tag: A. <audio src="media/sundial.mp3" controls>your browser does not support the audio element</audio> B. <audio src="media/sundial.mp3" autoplay controls>your browser does not support the audio element</audio>

10 Audio & Video 10 C. <audio src="media/sundial.mp3" loop controls>your browser does not support the audio element</audio> D. <audio src="media/sundial.mp3" autoplay loop controls>your browser does not support the audio element</audio> Adding an Icon to your Web Site (Bonus Activity at # 23 on Activity Sheet) 1. To add an Icon for your web site first create a drawing in MS Word that captures the idea of your website. Use the drawing tools to accomplish this. 2. Next take a screenshot of your drawing and paste it into the same word document. Then select the pasted picture using the picture tools and right click and select the save as picture option. Save your picture in.jpg format in your HTML Practice folder. Alternatively, you can use the snipping tool to save a snip of your drawing as a jpeg file and save it to your Practice folder. 3. Next open your picture in Paint and resize it to 16 by 16 pixels. 4. Save the picture in your HTML Practice folder. (or change the next instruction to reflect where you saved your icon file in the href= images/iconname.jpg portion of the code). 5. In your head section of your HTML document type: <link rel= icon href= iconname.jpg type= image/x-icon </link> And replace the iconname.jpeg for the name of your icon. Save the changes to your HTML editor and refresh your webpage and you should see an icon in your address bar to the left of your address: Creating Images The above examples assumed that you already had an image to embed into your web page. To learn about creating images for the web, check out the Web Graphics Tutorial (

11 Audio & Video 11 Next Lesson: Referencing Bonus activities: These activities are not required, but if they are used in the final project successfully they may create an opportunity for bonus marks. 1. Go to the shared drive and look at the Tables folder, and read through the tables activity and create a webpage with a table or two. 2. Do some research on Cascading Style Sheets (CSS) and see if you can: A. Create a series of style tags at the top of a document to format a webpage. B. Create a separate style sheet that a web page will use to format a webpage. 3. Do some research on HTML 5 and CSS to see if you can create a navigation bar at the bottom of your webpage to link to all of your pages in the website.

Attributes & Images 1 Create a new webpage

Attributes & Images 1 Create a new webpage Open your test page. Use the Save as instructions from the last activity to save your test page as 4Attributes.html and make the following changes: