Turtle Sculpture

OmniUpdate User's Guide

Embedding Video Media

In 2010 we are enabling the embedding of streaming video into web pages that are managed with OmniUpdate. Embedding is enabled on request only, as it could be detrimental to De Anza' web services if media embedding is misapplied or abused.

Intellectual Property, Fair Use & Copyright Law

"Publishing copyrighted material without the consent of the owner on District Web sites in violation of copyright laws." - FHDA Educational Technology Advisory Committee (ETAC) Procedures Regarding Misuse of Computer Information AP 3250.

Fair Use is not a law. It is a set of guidelines intended to help protect you from lawsuits in case a legal issue arises; you may be held personally liable by the copyright owner.

More details on your responsibilities and liabilities maybe be found on De Anza's Distance Learning page about Intellectual property, Fair Use and Copyright Law.


Section 508 - Accessibility

Faculty and staff must support the Foothill/De Anza College District's compliance with Section 508, which is part of the federal law known as the Rehabilitation Act of 1973. The primary impact on video content is the requirement for captioning. More details can be found at the ETS District website:

 

Hosting Limitations and Options

De Anza's main web server is not capable of serving sustained and simultaneous video streams, so hosting of video files on the web server is discouraged. There are three alternative video hosting options:

  • De Anza has a dedicated video streaming server. Faculty and staff can arrange with the Web Team to have video files hosted on the server. Here's an example of a hosted Quicktime file
  • De Anza has an Apple iTunes U store that presently hosts content for a number of courses from Biology, Heath & Environmental Studies, Language Arts, Intercultural/International Studies,and other departments. The course content is visible only after a login and is hidden from public view.
  • Faculty may host video content with companies like YouTube and Vimeo.

 

Example - Embedding a YouTube Video

The following how-to demonstrates the embedding of this YouTube video:

http://www.youtube.com/watch?v=sSWKYOvy4QI

This procedure should also work for many other hosting sites, such as Vimeo.

Video file formats supported by OmniUpdate for embedding are Flash, Quicktime, Windows Media and Real Media. Another proprietary format named Transcode-It is also allowed, but is only available for OmniUpdate administrators.

Two pieces of information are needed to embed a YouTube video into an OmniIUpdate page:

  • The embed URL of the video - this is not the same as the URL shown above.
  • The dimensions of the video - width and height.
You will be shown how to obtain this information in the following steps.

 

Preparation: A web page to hold the embedded video should already be open in OmniUpdate in the edit mode.

Vimeo embed button location

If you have been approved to embed video, the "Insert / edit embedded media" tool icon should appear in your toolbar. It looks like a vertical strip of rectangular film frames. If you do not see this embed video tool icon in the editor, contact the Web Team to have the embed tool enabled. You will be asked for the pages or directories to set up with permission to embed video. Do not bother to proceed with the rest of the how-to until the embed video tool is enabled.

In another browser window, navigate to the YouTube video to be embedded.

Obtaining the Embed Code: Locate the Embed option button - on YouTube, this is located below the lower right corner of the video display.

YouTube embed icon location

The Vimeo embed icon appears at the right side of the video display when the page is loaded, and afterwards when the cursor is moved over the display area.

Vimeo embed button location

Clicking on the embed icon opens the embed dialog. 

For YouTube (with Privacy Mode enabled):
YouTube embed dialog

For Vimeo (partial view):
Vimeo embed dialog - partial view

In the pictures above, the "embed code" is the line of HTML code that begins with "<object width= ...' . You will need to copy & paste the embed code into a text editor or other handy temporary location. Since you already have the destination web page open in OmniUpdate, you could paste it into the main area of the page - you'll be deleting it later.

Before you copy the embed code, set any options that will improve the experience for visitors to your web page. I've chosen "Enable privacy-enhanced mode" so that YouTube does not set tracking cookies on the visitor's browser. The width is chosen to be less that the 600 pixel width of the main content area of a De Anza web page.

Here's the pasted total embed code from the YouTube video, with the information you need highlighted:

<object width="480" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/sSWKYOvy4QI&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/sSWKYOvy4QI&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

The repetition of the information comes from the need of the embed code to work in different browsers.

Key Embedding Information: For this video, the key information is:

Embed URL: http://www.youtube-nocookie.com/v/sSWKYOvy4QI
Width: 480 (pixels)
Height: 385 (pixels)

Please note that the entire URL from the embed code is not used, only the portion starting with http:// to the first & (ampersand) symbol.

 

insert / edit embedded media tool icon The "Insert / edit embedded media" Tool: The "Insert / edit embedded media" tool icon looks like a vertical strip of rectangular film frames. Selecting the embed tool will bring up the embed media dialog window.

embed tool dialog window

For YouTube and Vimeo, the Type is Flash.For the Dimensions, the box for the width value is on the left and the right-hand box is for height. Enter the values as they are defined in the embed text you obtained earlier. Be sure to check the Contrain proportions checkbox - that will allow you to change the size of the embedded video without distorting the proportions.

For File/URL, enter the Embed URL you obtained earlier.

Choose Insert to complete the embedding of the video.

When you are finished, you will have an embedded video that you can test in the Preview mode before publishing.

Cleanup: Don't forget to clean up any embed code you may have pasted into the page - this should be very obvious and hard to miss!

Embedding a De Anza Streaming Video

To embed a file that is hosted on the De Anza streaming server, you first need the URL of the video stream. You will use that URL as the embed URL. Here's a typical De Anza video stream link:

rtsp://dastream1.fhda.edu/chancellor/Carl_Brown.mov

NOTE: The Internet protocol used is not the typical "http://", instead it is "rtsp://", for Real Time Streaming Protocol.

To obtain the dimensions, play the streaming video in the appropriate player, and use the player's file information display to get the width and height.

Open the web page in the Omniupdate editor, place the cursor where you want to embed the video, and use the embed tool as described above to create the embedded video.

BUT - at the time of this writing (April 2010), embedding a De Anza video stream into an OmniUpdate page does not seem to work well or consistently. It is not recommended at this time.



WebGuide :: OmniUpdate
Contact: Web Team
sizeplaceholder


Last Updated: 12/17/14