skip to content

IT Help and Support

University Information Services
 

How to embed multimiedia content from the Streaming Media Service (SMS) into your web pages, and control who can view it.

The content that is hosted on the Streaming Media Service (SMS) can be viewed or listened to in a number of different ways:

  • a media player can be embedded in a web page so the content can be played directly from there
  • a link can be made to the page where the content is published on the SMS and the user may choose between the formats available (depending on their software/hardware and in case they want to view or listen to a lower quality version or download a file to play later)
  • materials that are indexed at iTunesU may be viewed directly from there using the iTunes application

There are some advantages and drawbacks associated with each of these, as detailed below. The user should not have to make changes to their browser unless they have not viewed video or listened to audio before, in which case they may have to install or upgrade some plug-ins. Some portable devices (mobile phones, iPod Touch, etc) may be unable to show video through a browser but most can download and play the media locally.

Available formats

When it processes your video or audio input, the SMS creates a number of formats of output file, which are suitable for different purposes. If you are embedding video or audio, the default format presented will be Auto (shown by *), which will enable the browser to select the format most suitable for presentation.

As an example, if you follow the link to the video http://sms.cam.ac.uk/media/1074092 and look under the 'Available Formats' tab, you will see a list of alternative formats that people could select if they were having problems.

Embedding video or audio in a web page

The SMS provides an embed service if you wish to show audio or video in your own pages.  The advantages of this service are:

  • Maximum browser and device compatibility, utilising multiple formats.
  • As video and browser standards change, your website is isolated from the change by proxying the latest code from the SMS.
  • Large videos remain on the SMS saving you storage space.
  • Peak loads are handled by the SMS with high availability.
  • The SMS records statistics for you.
  • You may restrict the visibility of your media to members of the University.

oEmbed for Content Management Systems

Content Management Systems (CMSs) provide the simplest way for people to manage HTML content and often this simplicity extends to embedding media. Many CMSs allow users to add a video by copy and paste of the URL of the page where they saw the video.

Underneath the bonnet, a CMS negotiates how to embed using the oEmbed protocol. YouTube, Vimeo and the Streaming Media Service support oEmbed, and shortly the University's Falcon CMS will be able to talk oEmbed on your behalf.

Static embedding (fixed size)

You can embed video or audio media into your web pages by copying the share code from the SMS.

  • Visit a media page on the SMS. For example: http://sms.cam.ac.uk/media/1074092
  • Underneath the media, click the Share button: Share button
  • Optionally choose a smaller size using the drop down menu underneath the HTML code.
  • Copy and paste the iframe HTML into your web page.
<iframe width="640" height="360" src="//sms.cam.ac.uk/media/1074092/embed" frameborder="0" scrolling="no" allowfullscreen></iframe>

This will embed the video at a fixed size, 640x360 pixels in the example.  The media data is always sent at the highest quality available which typically matches the default size.

If you use Falcon (the UIS content management service), instructions for inserting audio and video are at http://falcon-help.csx.cam.ac.uk/content/complex-content/video

Tips

  • You can manually adjust the width and height parameters to a smaller size. If you change size, ensure that you retain the aspect ratio of your videos to avoid distorting your content.
  • If you make the iframe smaller, data is still sent at the highest quality. For video, your viewers can see the full quality of the media when they toggle the player to fullscreen mode.
  • The src attributes begin with // rather than 'http:' or 'https:'.  The double-slash will use the protocol in use for the current page, preventing browsers warning about mixing http and https content.

Embedding for responsive design

Current web design trends adapt web pages and content to the current size of a web page or device screen.  SMS content can be embedded to support this.

Instead of having a fixed size iframe, you can size it relative to the browser window.

<div style="width:70%">
 <div style="position:relative; width:100%; padding-bottom:56.25%;">
   <iframe style="position:absolute; top:0; bottom:0; width:100%; height:100%;" src="//sms.cam.ac.uk/media/650158/embed" frameborder="0" scrolling="no" allowfullscreen></iframe>
 </div>
</div>
  • The outermost div is sized at 70% the browser window or container current width.
  • The second div width and padding-bottom control the aspect ratio. In this case 16:9. For 16:9 use padding-bottom:56.25%, for 4:3 use padding-bottom:75%
  • Note the iframe width and height parameter have been removed.
  • The above example could be simplified using CSS3 viewport width and height percentages (vw and vh) but does not yet have enough support among grade A browsers.

If you use Falcon (the UIS content management service), instructions for inserting responsive video are at http://falcon-help.csx.cam.ac.uk/content/complex-content/video

Restricted Media

SMS Media Items are visible to anybody by default, but can also be restricted to Raven Users Only, or an Access Control List made up of Lookup CRSids; Lookup groups; and Lookup Institutions. SMS administrative staff can see items regardless of restrictions.

Media item visibility

The Media edit page has a visibility option where you can choose from:

  • World
  • Raven Users Only
  • Access Control List

Choosing the last option reveals a text box where you may enter Lookup entities.  Follow the instructions below the text area. On each line type a Lookup person, group or Institution identifier. Select the desired result from the list of choices presented.

Collection visibility

If you need to control access to most or all items within a Collection you can specify an Access Control List via the Collection edit page.

After a Collection Access Control List has been put in place, it overrides the Media Item's visibility setting if the media was visible to World or Raven Users Only.  On the edit page for an affected Media Item, the visibility option will have the following option selected:

  • Collection Access Control List

Choose one of the other options to opt out:

  • World
  • Raven Users Only
  • Access Control List
  • If an Access Control List is being added to a Collection that has existing Media Items, you should review their visibility settings and consult with the uploader and/or copyright holder before overriding their settings.

Lookup groups

Access Control Lists can specify Lookup Groups.  A group is particularly useful if you want to define a list of people once in Lookup and re-use that group membership list for multiple Media items or Collections (see http://www.ucs.cam.ac.uk/lookup/groups for more information).

Groups are created within the Lookup application by people with edit rights in that Institution.

  • Visit http://www.lookup.cam.ac.uk/
  • Find an Institution using the search, or browse to your Institution via Your Page http://www.lookup.cam.ac.uk/self
  • Click the groups tab.
  • If you have edit rights you'll see a 'create group' button. Otherwise find the 'Editors Group', list the members and get one of those people to create a group for you.
  • On the 'create group' page fill in the details.
  • In the 'Privileged Access By' section add "Streaming Media Service Managers" with groupid 100904.

After saving, you can return to the SMS then find and add this group to your Access Control List.

Accessibility and the use of Video

You should add a transcript of your video so that those who cannot see or hear the video have access to the content. It will also provide content that can be indexed by search engines.

  • If you have added captions to your video, you will still need to provide a transcript. Captions can only give the essence of the video narration.
  • When you embed a video or audio file in a web page you lose all the associated information about the speaker and event, you must be sure that is adequately covered in your text.

Making a link to the media page on the SMS

When you embed media in a web page only one format will be provided, so you should link to the SMS page for that media item to allow access to other formats, and also to give access to a long description or transcript for the presentation. Adjacent to the embedded player you could use a paragraph like the following:

Other formats of this video and a transcript are available from http://sms.cam.ac.uk/media/212. 

There are circumstances when you may not want to embed a player in a web page but only have a link - although you miss the immediacy of the player on the page, alternative versions are readily available and users also may be inspired to look at other associated content.

Using information in iTunesU

The video and audio in the University's iTunesU can be accessed via the iTunes application (download for Mac or Windows, see http://www.apple.com/itunes/download/) - this is possible on devices that can't show video through a browser. The University content listed in iTunesU is controlled by the Communications section of the Office of External Affairs and Communications (see http://www.cam.ac.uk/video-and-audio/itunes-u for information) and is hosted on the SMS, so those who cannot use the iTunes application can still access the audio and video. For advice please contact itunesu@admin.cam.ac.uk

Last updated: 9 October 2014