1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
This is CS50 Video.
---

Video50 is an extensible video player that allows a variety of question types to be embedded at specific timecodes and supports transcripts for multiple languages.

# Player

To create a new CS50 Video player, instantiate a new `CS50.Video` object:

    var player = new CS50.Video({
        aspectRatio: 720 / 480,
        autostart: true,
        defaultVideo: '720p',
        download: {
            '360p': 'http://cdn.cs50.net/2012/fall/lectures/0/week0w-360p.mp4',
            '720p': 'http://cdn.cs50.net/2012/fall/lectures/0/week0w-720p.mp4'
        },
        playerContainer: '#video',
        questions: questions,
        srt: {
            en: 'week0w-en.srt',
            pt: 'week0w-pt.srt'
        },
        streamUrl: 'rtmp://stream.cs50.net/cfx/st/',
        title: 'Lecture 0: Wednesday',
        video: {
            '360p': '2012/fall/lectures/0/week0w-360p.mp4',
            '720p': '2012/fall/lectures/0/week0w-720p.mp4'
        },
        videoUrl: 'http://cdn.cs50.net/'
    });

The options object passed to the `CS50.Video` constructor can define the following keys:

* `aspectRatio`: Aspect ratio for the video
* `autojoin`: Group slug to automatically join upon logging in
* `autostart`: True to start video automatically, false otherwise
* `baseUrl`: Base URL for video50's directory
* `checkUrl`: URL to be used for checking the answers to questions remotely
* `defaultLanguage`: Default language for transcript and subtitles
* `defaultVideo`: If using multiple video URLs, the video to play by default
* `download`: String of single download URL, or object containing multiple download URLs
* `onReady`: Function to be called when player is ready
* `playbackRates`: List of supported playback rates
* `playerContainer`: Container to render player within
* `playerOptions`: Additional options to pass to the video player
* `mixpanelKey`: API key for Mixpanel analytics
* `questions`: List of questions to be displayed during video
* `srt`: Object mapping languages to SRT file locations
* `streamUrl`: Base URL for RTMP streaming
* `survey50`: Survey ID if using survey50 integration
* `survey50Url`: CNAME to use if using survey50 integration
* `title`: Title of Video
* `user`: User object for analytics tracking
* `video`: String of single video URL, or object containing multiple video URLs (if using RTMP streaming, this must be relative to streamUrl and videoUrl)
* `videoUrl`: Only used if using RTMP streaming; base URL for video file

Of these keys, `playerContainer` and `video` are required.

# Questions

A question is represented by an object with the following required keys:

* `timecode`: Second of the video at which question should become available.
* `question`: Object representing the question to be displayed. This object must contain at least an `id` representing the unique identifier for the question, a `render` function that will be called in order to display the question, and an array of `tags` that describe the topics covered by the question. Information specific to a question type, such as a `question` and an `answer`, must also be defined in this object.

Questions are displayed to the user via a question rendering method. A question rendering method will be passed the following parameters from the `CS50.Video` object:

* `video`: CS50 Video instance that has created the question.
* `container`: The container to render the question within.
* `data`: An object containing the data necessary to display the question.
* `callback`: A callback function that must be called when the question is answered, for server-side logging purposes.

The question renderer is then responsible for manipulating the DOM to allow users to interact with the question and informing them whether or not their answer is correct. To create a new question type, simply define a new rendering method and set that method as the `render` parameter in the question object. Check out the existing question types for examples.

## Existing Question Types

Video50 ships with support for several common question types.

### Free-Response

Defined by `CS50.Video.Render.FreeResponse`

A question allowing the user input text into a text box. The following keys must be defined:

* `answer`: A regular expression matching a correct answer.
* `question`: The text of the question.

### Remote Free-Response

Defined by `CS50.Video.Render.FreeResponseRemote`

Server-side version of free-response.

* `question`: The text of the question.

### Multiple-Choice

Defined by `CS50.Video.Render.MultipleChoice`

A question allowing the user to select from a list of choices. The following keys must be defined:

* `answer`: The index of the correct answer.
* `choices`: Array of choices to be displayed to the user.
* `question`: The text of the question.

### Remote Multiple Choice

Defined by `CS50.Video.Render.MultipleChoiceRemote`

Server-side version of multiple choice.

* `choices`: Array of choices to be displayed to the user.
* `question`: The text of the question.

### Numeric

Defined by `CS50.Video.Render.Numeric`

A question allowing the user to input a number into a text box. The following keys must be defined:

* `answer`: Numerical answer to the question.
* `question`: The text of the question.
* `tolerance`: Uncertainty value for the answer. For example, a tolerance value of `0.1` will accept all answers that are within 10% of the specified answer.

### Remote Numeric

Defined by `CS50.Video.Render.NumericRemote`

Server-side version of numeric.

* `question`: The text of the question.

### True/False

Defined by `CS50.Video.TrueFalse`

A question allowing the user to select "true" or "false". The following keys must be defined:

* `answer`: Boolean value representing the correct answer.
* `question`: The text of the question.

### Remote True/False

Defined by `CS50.Video.Render.TrueFalseRemote`

Server-side version of true/false.

* `question`: The text of the question.