A8 – Multimedia


Objectives: Gain experience using HTML multimedia.

Description: In this assignment you will create a web page that allows the user to select media files to display.


Create an HTML page for media selection and viewing.

It is highly recommended that you complete the multimedia exercise prior to attempting this assignment!

In this assignment you will utilize several HTML features that you have learned this semester. You will also use JavaScript (provided) to make the page interactive.


Head element

The head section should include the following lines:

<script type="text/javascript" src="http://homepages.cob.isu.edu/parkerkr/courses/INFO1110/Spring15/assignments/scripts/assn8.js"></script>
<link href="http://homepages.cob.isu.edu/parkerkr/courses/INFO1110/Spring15/assignments/css/mediaStyle.css" rel="stylesheet" type="text/css" />

Note that in addition to the JavaScript file, I also provided the CSS because I'm nice.


Site Functionality

First, be sure that you included the link to the JavaScript file, as explained in the section titled "Head Element".

When the page is first opened all you should see is a fieldset with two radio buttons allowing you to select audio or video files.


Visual Guidance

Your page should resemble the demo pages as closely as possible, and will consist of three sections, only one of which will be visible at any one time.

Overview Image

The following image shows how the page would look in Chrome if all sections were displayed. Click the plus sign to see it: expand


Introductory view

However, if you linked to the JavaScript file correctly you should see only the first section upon opening the page. It should look like the image below. Click the plus sign to see it: expand


Media Selection View

Once you select Audio or Video and click the Submit button, you will see a view like the one shown in the image below. Click the plus sign to see it: expand


Audio Player View

If you selected an audio file, when you click the Submit button you will see a view like the one shown in the image below. Click the plus sign to see it: expand


Video Player View

On the other hand, if you selected a video file, when you click the Submit button you will ee a view like the one shown in the image below. Click the plus sign to see it: expand



HTML Details

Body tag

Your body tag needs to be associated with a JavaScript function. In order to do so, your tag should look like this:

<body onload="hideSections();">


Section 1

Give this section the id "mediaTypeSelection". (If you screw up the provided ids or prefer to select different ids, the JavaScript will NOT work.)

  • The section should include a form element, with the id set to "mediaType".
  • The form should include a fieldset.
  • The fieldset should include a legend (Media Type).
  • The fieldset should include a label (Choose the media type:). You may have to experiment in deciding which of the provided CSS rules to assign to the label.
  • The fieldset should include two radio buttons, both with the name set to "mediaGroup", one with the value "Audio" and other with "Video", and the first one set to required and autofocus. You may have to experiment in deciding which of the provided CSS rules to assign to the radio buttons.
  • The fieldset should also include a button element of type "button", with an onclick event. Copy the following code exactly:

    <button type="button" onclick="openPane2();">Submit</button>


Section 2

Give this section the id "mediaFileSelection".

  • The section should include a form element, with no id required.
  • The form should include a fieldset.
  • The fieldset should include a legend (File Selection).
  • The fieldset should include a label (Select a media file:). You may have to experiment in deciding which of the provided CSS rules to assign to the label.
  • The fieldset should include a select element with the id equal to "file" and the name set to "files[]". There should be no option elements inside the select element, because those will be provided by the JavaScript after the user selects a media type.
  • The fieldset should include a button that uses the code below:

    <button class="topLine" type="button" onclick="openPane3();">Submit</button>

  • The fieldset should include a second button that uses the code below:

    <button class="topLine" type="button" onclick="location.reload();">Back to Start</button>


Section 3

Give this section the id "openFile".

  • Include an h3 tag with the id "fileName".
  • Include an audio tag with the id "audioFile", with the controls, autoplay, and preload attributes. Do not include a source element, because that will be determined by the user. Include the typical note warning in case the user's browser does not support the audio element.
  • Include a video tag with the id "videoFile", with the controls and preload attributes. Do not include a source element, because that will be determined by the user. Include the typical note warning in case the user's browser does not support the video element.
  • The section should include a button that uses the code below:

    <button class="topLine" type="button" onclick="location.reload();">Back to Start</button>



Notes

  • First save the file locally and then when you are finished you can upload it to the server (classweb.cob.isu.edu) using these directions.
  • Name your file assn08.htm.
  • Use CSS as needed.

Alternative Versions

  • If you wish to express your creativity by coming up with a more visually appealing page than the demo, feel free to do so. While you must upload a version of the assignment that meets the specs so the grader can do an efficient job, I would welcome the opportunity to see how creative you can be. An alternate version would provide you with additional practice as well.

Reminder! You should ALWAYS do the following, whether I specify it or not.

  • Include the HTML5 doctype.
  • Include a title using the title tag.
  • Nest your tags correctly.
  • Indent code correctly.
  • Validate your html using the W3C HTML Validator.
  • Validate your css using the W3C CSS Validator.
  • Link your page to your index page. There will be a 25 point deduction if you fail to do so.
  • For each assignment that you set up this semester you need to include adequate commenting. For example, in the first part of this assignment you might include a comment block like the following at the top, per the instructions at the bottom of the Assignments Page:

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
           Ima Student
           April 24, 2020
          Assignment 6
          Purpose: This is a demo of HTML embedded media...
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->