Pre-lab

None

In-lab

Upload Project 3 to Server

1. Use WinSCP to upload your Project 3 files to the remote server.
2. Both you and your partner should do this separately.
3. Here are the connection details:

   Connecting via WinSCP

   • Hostname: ftp.sienasellbacks.com
   • Username: lastname@sienasellbacks.com
   • Password: Told to you in lab
   • Settings: Use FTP (Port 21)
   • Server URL: lastname.sienacs.com
4. Open your local project3 folder and upload the files in your project3 folder to the root folder (called public_html) on the remote server.
5. Important: You should NOT upload your entire project3 folder so that it is inside public_html. Rather, you should copy all of your files directly from project3 to the root folder such that there is no project3 subfolder. If you do not do this properly, you will lose points on this lab activity.
6. In general, to save and test your files on the remote server you must do the following:
   1. Save your file locally.
   2. Use WinSCP to upload your file to the web server.
   3. Use a web browser and type the URL of the web page you want to view (for example http://lastname.sienacs.com/page.html) or by refreshing the web page if it is already load.
   4. If you do not see your changes, do a hard refresh (hold SHIFT key and press the refresh/reload button on the web browser).
   The instructions above will ensure that your newly saved web page is being properly viewed on the server, i.e., an HTTP request is made to the server. Depending on the cache settings and how you navigate back to a web page, some web browsers (mostly IE and older versions of Safari) will fetch the cached web page and you will NOT see any new changes you made.

Embedding Video with HTML5

You will will repeat this task twice: first for you and second for your partner. Essentially, we will be creating a new subfolder called multimedia that will be added to the examples folder of Project 3.

You and your partner should read pages 192-196 as you complete the task below.

1. In your locally stored files, create a new folder called multimedia inside your examples folder of your project3 folder.
2. Download hungergames.mp4 and hungergames.png to your multimedia folder.
3. In Notepad++, create a new file called example1.html in your multimedia folder. Remember your multimedia folder is inside your examples folder of your project3 folder.
4. Add the required HTML5 code (use your other project files as a reference) and then add the video tag shown on page 195 to embed the video you just downloaded.
5. Be sure to use the PNG file as the poster.
6. Link this new HTML example to your project by adding a new link in your examples/index.html file. Call the link "Video Tag Example"
7. Upload your multimedia folder and your examples/index.html file to the remote web server.
8. Navigate to your examples/index.html (http://lastname.sienacs.com/examples/), test your link and be sure your embedded video plays.
9. In Notepad++, modify the video tag and remove the autoplay attribute. Save, upload and test the web page in Chrome. The video should NOT automatically play and instead the poster image should be displayed.

Testing Your Video in different browsers

You only have to do this part once. You do NOT have to do it for your partner's project3.

1. Your computer has three different web browsers installed (Firefox, Internet Explorer, and Chrome) and many of you may have cellphones capable of testing the embedded video.
2. Using the three installed browser and one mobile device, navigate to http://lastname.sienacs.com/examples/multimedia/example1.html and see if your embedded video plays in all four browsers.
3. Take note of the video controls and the smoothness/seamlessness of the video playback.
4. Browsers that do not natively support the HTML5 video tag will have issues playing the video.

Embedding Video using the object/embed tag

You should do this part twice: first for you and second for your partner.

1. In a Notepad++, create a new file called example2.html in your multimedia folder. Remember your multimedia folder is inside your examples folder of your project3 folder.
2. Add the required HTML5 code (use your other project files as a reference) and then add the video using the following method:

   <object> 
       <embed width="640" height="380" src="hungergames.mp4"> 
   </object>
   

3. Link this new HTML example to your project by adding a new link in your examples/index.html file. Call the link "Object/Embed Tag Example"
4. Upload your example2.html and your examples/index.html file to the remote web server.
5. Navigate to your examples/index.html (http://lastname.sienacs.com/examples/), test your new link and be sure your embedded video plays.

Testing Your Video in different browsers

You only have to do this part once. You do NOT have to do it for your partner's project3.

1. Using the three installed browser and one mobile device, navigate to http://lastname.sienacs.com/examples/multimedia/example2.html and see if your embedded video plays in all four browsers.
2. Take note of the video controls and the smoothness/seamlessness of the video playback.
3. New web browsers may no longer support this method of embedding video.

Embedding Audio with HTML5

You will will repeat this task twice: first for you and second for your partner.

You and your partner should read pages 198 as you complete the task below.

1. Download comedy.mp3 to your multimedia folder.
2. In Notepad++, create a new file called example3.html in your multimedia folder. Remember your multimedia folder is inside your examples folder of your project3 folder.
3. Add the required HTML5 code (use your other project files as a reference) and then add the audio tag shown on page 198 to embed the audio you just downloaded.
4. Link this new HTML example to your project by adding a new link in your examples/index.html file. Call the link "Audio Tag Example"
5. Upload your comedy.mp3, example3.html, and your examples/index.html files to the remote web server.
6. Navigate to your examples/index.html (http://lastname.sienacs.com/examples/), test your link and be sure your embedded audio plays.

Deliverables

You and your partner's Project 3 should be uploaded to the server with a new multimedia folder and three new HTML example pages (Video, Object/Embed, and Audio Examples)