Child pages
  • Tutorial - Integrating the Video Player into an authoring environment

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

DRAFT

On This Page

Overview

This tutorial will provide guidance for integrating the Video Player into an authoring environment, that is, allowing content authors to embed videos into the content, and using the Infusion Video Player to render those videos.

While this tutorial will attempt to provide as much specific technical information as possible, we recognize that each content authoring environment is unique, and the specifics of how to add code, develop a user interface, etc. will be unique to each situation. This tutorial will identify the nature of the tasks that will need to be accomplished and provide suggestions wherever possible.

Collecting Information

When a content author wishes to embed a video into the content, the authoring environment must prompt the author for various information. That information is described below. The technical formats for the information is described in the next section, under "Configuration Format."

Video Source(s)

Obviously, the author has to actually specify the video source itself. The Video Player requires at least one source, but in some cases, the author may have the video available in multiple formats, to provide cross-browser support (for example, Safari does not support WEBM).

The interface for collecting the video source should require the author to specify at least one source, and should provide the option of adding additional sources.

For each video source, the author must specify two things:

  1. the actual source
  2. the format

The Video Player supports a fixed set of formats, so the user interface for specifying the format should be a single-selection controlled list, such as a drop-down or set of radio buttons.

Caption(s)

The Video Player provides automatic integration with several caption formats, and content authors should be encouraged to provide captions for any videos. Captions are not required, but multiple captions are supported, to allow different languages.

For each caption, the author must specify four things:

  1. the caption source
  2. the format
  3. the language (using a language code)
  4. the display string for the language

The Video Player supports a fixed set of caption formats, so the user interface for specifying the caption format should be a single-selection controlled list, such as a drop-down or set of radio buttons. The language selection might also be rendered as a controlled list of ISO-specified language codes.

Transcript(s)

The Video Player provides automatic integration with several transcript formats, and content authors should be encouraged to provide captions for any videos. Transcripts are not required, but multiple captions are supported, to allow different languages.

For each transcript, the author must specify four things:

  1. the transcript source
  2. the format
  3. the language (using a language code)
  4. the display string for the language

The Video Player supports a fixed set of transcript formats, so the user interface for specifying the caption format should be a single-selection controlled list, such as a drop-down or set of radio buttons. The language selection might also be rendered as a controlled list of ISO-specified language codes.

Video Title

The video title is a string that will be added as an attribute to the HTML video element. This string can be read by assistive technologies such as screen readers.

Example

The Fluid Project is creating a WordPress plugin that will allow authors to embed the Video Player into WordPress posts and articles. The initial wireframes for the plugin interface show how the plugin will collect information from the author.

Generating Javascript

Creating a Video Player

var myPlayer = fluid.videoPlayer(<container selector>, <configuration options>);

Configuration Format

PropertyDescription
video(required) This option provides references and metadata for the video, captions and transcripts in three sub-properties, as described below.
video.sources

(required) An array of JavaScript objects specifying the video(s):

{
    src: <string>,
    type: <string>
}

Where

string is a URL referencing a video file

type is a string defining the format of the video. Supported video types are:

      • "video/mp4"
      • "video/webm"
      • "video/ogg"
      • "video/ogv"
      • "video/youtube"
video.captions

(optional) An array of JavaScript objects specifying the caption file(s):

{
    src: <string>,
    type: <string>,
    srclang: <string>,
    label: <string>
}

Where

string is a URL referencing a caption file.

type is a string defining the format of the caption. Supported caption formats are:

      • "text/amarajson"
      • "text/vtt"

srclang is the language code representing the language of the caption.

label is the display string for the language.

video.transcripts

(optional) An array of JavaScript objects specifying the transcript file(s):

{
    src: <string>,
    type: <string>,
    srclang: <string>,
    label: <string>
}

Where

string is a URL referencing a transcript file.

type is a string defining the format of the transcript. Supported transcript formats are:

      • "text/amarajson"
      • "JSONcc"

srclang is the language code representing the language of the transcript.

label is the display string for the language.

videoTitle(optional) A string that will be set as the title attribute for the video. This string will be spoken by screen readers.
strings

(optional) A JavaScript object defining various strings that are part of the Video Player interface. This option can be used to override the default values, which are:

strings: {
    captionsOff: "Captions OFF",
    turnCaptionsOff: "Turn Captions OFF",
    transcriptsOff: "Transcripts OFF",
    turnTranscriptsOff: "Turn Transcripts OFF",
    videoTitlePreface: "Video: "
}
model

(optional) A JavaScript object defining starting values for various Video Player configurations. This option can be used to override the default values, which are:

model: {
    currentTracks: {
        captions: [],
        transcripts: []
    },
    currentTime: 0,
    scrubTime: null,
    totalTime: 0,
    bufferEnd: 0,
    displayCaptions: false,
    displayTranscripts: false,
    fullscreen: false,
    volume: 60,
    muted: false,
    canPlay: false,
    play: false
}

JavaScript Examples

Single local video source, no captions or transcripts
 var myPlayer = fluid.videoPlayer(#vp-container, {
    video: {
        sources: [{
            src: "videos/myVideo.webm",
            type: "video/webm"
        }]
    },
    videoTitle: "Video of a cat in a sink"
 });
Single local video source, one caption
 var myPlayer = fluid.videoPlayer(#vp-container, {
    video: {
        sources: [{
            src: "videos/myVideo.webm",
            type: "video/webm"
        }],
        captions: [{
            src: "captions/myVideo.vtt",
            type: "text/vtt",
            srclang: "en",
            label: "English"
        }]
    },
    videoTitle: "Video of a cat in a sink"
});
Multiple video formats, several captions
 var myPlayer = fluid.videoPlayer(#vp-container, {
    video: {
        sources: [{
            src: "videos/myVideo.webm",
            type: "video/webm"
        },{
            src: "videos/myVideo.mp4",
            type: "video/mp4"
        },{
            src: "http://www.youtube.com/v/_VxQEPw1x9E",
            type: "video/youtube"
        }],
        captions: [{
            src: "captions/myVideo.en.vtt",
            type: "text/vtt",
            srclang: "en",
            label: "English"
        },{
            src: "captions/myVideo.fr.vtt",
            type: "text/vtt",
            srclang: "fr",
            label: "French"
        },{
            src: "captions/myVideo.es.vtt",
            type: "text/vtt",
            srclang: "es",
            label: "Spanish"
        }]
    },
    videoTitle: "Video of a cat in a sink"
});
Overriding some default configuration
 var myPlayer = fluid.videoPlayer(#vp-container, {
    video: {
        sources: [{
            src: "videos/myVideo.webm",
            type: "video/webm"
        }],
        captions: [{
            src: "captions/myVideo.en.vtt",
            type: "text/vtt",
            srclang: "en",
            label: "English"
        },{
            src: "captions/myVideo.fr.vtt",
            type: "text/vtt",
            srclang: "fr",
            label: "French"
        }]
    },
    videoTitle: "Video of a cat in a sink",
    model: {
        volume: 40, // set the starting volume
        displayCaptions: true, // captions showing by default
        currentTracks: {
            captions: [0],	// select the English caption
        }
    }
});
  • No labels