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

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

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

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

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

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

 var myPlayer = fluid.videoPlayer(#vp-container, {
    video: {
        sources: [{
            src: "videos/myVideo.webm",
            type: "video/webm"
        }]
    },
    videoTitle: "Video of a cat in a sink"
 });

 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"
});

 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"
});

 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
        }
    }
});