How to Make a Website (DW)/Step 7- Make a Media Portfolio Page/Design Option: Embedding & Displaying Video, Audio, and PowerPoint

From WSU Technology Knowledge Base
Jump to: navigation, search

Video, audio and PowerPoint can display in browsers on windows or tabs that are launched to view them.

Alternatively, you can embed video and audio from your web page using Active X. This embedded file can be hosted on your own web server, or it can be hosted from a third-party server such as YouTube.

PowerPoint requires a specialty third-party host to embed presentations in the native file format, although you can also display your PowerPoint presentations in an HTML or in a movie format and use your own web server for these.

The instructions below will detail the options for embedding and displaying video, audio and PowerPoint.


Using a Hyperlink to Display a Video or Audio File or PowerPoint Presentation

In your catalog or "gallery" of media, you can use the Property inspector and the Point-To-File icon to create links from an image or icon, or the title or text for the object to display it.

Select Link and Choose "Target"
By default that link will replace the current window, and will display the video, audio or PowerPoint in the format you have selected.
NOTE: The linked audio or video files will open onto a blank window with a player and will start to play automatically. PowerPoint presentations must be first saved as HTML in order to be displayed, unless they have been embedded. See section Embedding PowerPoint Presentations Hosted on SlideShare™ below for instructions on embedding.

Dreamweaver creates the links to other pages in your site using document-relative paths. You can also tell Dreamweaver to create new links using site root–relative paths. You can use the Property inspector’s folder icon or Link box to create links from an image, an object, or text to another document or file.

  1. Select (highlight) the text or an image in the Document window’s Design view.
  2. Open the Property inspector (Window > Properties) and do one of the following:
    —Click the folder icon to the right of the Link box to browse to and select a file.
    —The path to the linked document appears in the URL box.
    —Type the path and filename of the document in the Link box.
    —To link to a document in your site, enter a document-relative or site root–relative path.
    —To link to a document outside your site, enter an absolute path including the protocol (such as "http: // ...").
  3. From the Target pop‑up menu, select a location in which to open the document:
    —_blank loads the linked document in a new, unnamed browser window (or tab).
    —_parent loads the linked document in the parent frame or parent window of the frame that contains the link.
    —_self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
    —_top loads the linked document in the full browser window, thereby removing all frames.
Recommended: for audio, video or other files that are hyperlinked for display, select the Target of "_blank" so that the file will open in a new window or tab.
This way your original portfolio page is still open in another tab or window.

Steps to Display a PowerPoint Presentations as HTML Hosted from Your Own Web Server

Options for HTML Output of PowerPoint Presentations
Because PowerPoint presentations will NOT display in a web browser (except Windows Internet Explorer), it is recommended that you convert your convert your PowerPoint presentation to HTML for display.
NOTE: HTML versions of PowerPoint will NOT contain several important PowerPoint features you have in the original file:
  • Any automation or animations of text or slide transitions
  • Any video or audio content
  • Any voice-over or narration you have applied to the slides
If these features are important, consider embedding the file with SlideShare. Or instruct your viewers to download the file and be sure to "package" any incorporated video/sound files that are a part of it.
  1. Open your PowerPoint Presentation
  2. Using the menu choose File>Save as web page...
  3. You will be prompted to:
    —give it a name
    —create a folder for it which you can save or later put into the root of your web site on your computer;
    —click on the button for web options to review and set any options for display
    —see example of some options in the thumb on the right....
  4. Save the presentation

The HTML version of a PowerPoint Presentation uses "frames" to create three panels inside the web page. A vertical left side panel will list the slides for navigation. The main panel will display the slide. Immediately below it is a horizontal panel where your slide notes can be displayed. This "framed" web display requires some expertise with HTML to modify.

It is recommended that you do not try to modify it but set a link to it from your "gallery" or "catalog" of files, and set the Target as "_blank" so that it opens in a separate tab or window.


Embedding Audio or Video Files Hosted from Your Own Web Server

You can embed a variety of video or audio file formats. Some are native to the PC such as video in the WMV format or sound in the WAV format and may not play in all browers or on the Mac. The most reliable video file format across many browsers and both PC and Mac computers is MP4; the most reliable sound file format is MP3.

Recommended: Convert your video or sound files to MP4 (video) or MP3 (audio) formats for best results.
See This Free Online Service for help in conversion of file formats.

To embed a file which will be hosted on your own web server, you will use a special "embed" script and an "object" called Active X. This Active X object will display content using a "plug-in" on the web browser of the user visiting your site, such as Quicktime player or RealPlayer or Windows Media Player, to view the movie or listen to the audio that your are hosting.

Steps to Embed a Video or Audio File as an Active X Object

Completed Properties for an "Embedded" Active X Object
DW example Embedded.png

The object will be placed within a cell/row of your table in your Catalog or Gallery web page for your portofolio.

In the same or an adjacent cell you may give the object a title and a description.

To place and define the object take these steps:

  1. Put your insertion point where you wish it to be
  2. Using the menu choose Insert>Media>Active X
  3. Enter a Title for the Object in the dialog
  4. The object will be placed and can now be modified:
    —Set the size
    Recommended:
    if an audio file, set size at W=380 H=100; if a video file for a half page, W=380 H=285; if for a full page (a full row), H=640 H=480.
  5. Check the box for "Embed"
    —in the field Src use the folder/explorer to link to the audio/video file
  6. Click in the field ClassID and type or paste this attribute:

    QuickTime CLASSID: clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B

    NOTE: this is recommended value.
    You have the option of also selecting other Active X object classes such as:
    RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA
    Windows Media Player CLSID:22d6f312-b0f6-11d0 -04ab-0080c74c7e95
  7. Your Active X object is now ready for display.
  8. Change Parameters to change the default for "Autostart"
    —Enter the Parameter "autostart" and set the value to "false"
    DW ActiveX parameter.png

Embedding Audio or Video Files Hosted on YouTube™

This is a process that is easier to do than to explain.

You do not need to understand coding to do this, although it is pure code which does it.

Every hosted item on YouTube™, including those which you have uploaded at "unlisted" or "private" can be displayed on a web page you have created.

The embedding of such a hosted file will be similar to these steps for YouTube™. See the host for instructions.

Steps to Embed a YouTube™ File

If you are creating a portfolio, using the instructions How to Make a Website (DW), then you have used a table to organize the content on your page.

  1. Go to YouTube™ and copy the "embedding code" for your video/audio.
    NOTE: this is not the URL; it is a special field of data. See example.

    YouTube embedding.png
  2. In the Design View click in a cell (or wherever it is you want to insert your code).
  3. Switch to the Code View and Paste your "embedded" code.
  4. Switch back to Design View and you will see your "embedded" object as an Active X file.
    NOTE: some features can be modified with the Properties.

Embedding PowerPoint Presentations Hosted on SlideShare™

Follow the same directions as above, except that you will use SlideShare™ as the host, and the site is dedicated to PowerPoint presentations specifically.

The embedded code will also result in an Active X object where you insert it.

  1. Go to SlideShare™ and login as appropriate. Follow instructions.
  2. Copy the "embedding code" for your video/audio.
    NOTE: this is not the URL; it is a special field of data. See example.

    Slideshare example.png
  3. In the Design View click in a cell (or wherever it is you want to insert your code).
  4. Switch to the Code View and Paste your "embedded" code.
  5. Switch back to Design View and you will see your "embedded" object as an Active X file.
    NOTE: some features can be modified with the Properties.


Other Resources

Design Options for Media Portfolios

Steps to make a website in Dreamweaver