The stand-alone player allows users to view and search video transcripts without network access. Due to the technologies that the player uses, the stand-alone player requires a small web server to work.  These instructions describe how to package a video, its associated transcripts, and its supporting files into a stand-alone sm-player.  The package can be zipped into a single file, downloaded, unzipped, and run locally.

This package is what is downloaded when we publish a contributed video and its transcript.

Audience

This document is intended for those who will create these packages.  A separate README describes how to deploy and run the package.

Folder Structure


+ css
+ img
index.html
jetty.xml
+ lib
+ js
run
run.bat
+ swf
+ transcripts

css folder – cascading style sheets
ceebox-min.css – pop-up window that displays when the video is clicked.  It contains the player and transcript.
page.css – styles index.html [don’t change]
reset.css – Eric Meyer’s styling reset script. [don’t change]
style.css – styles the pop-up window driven by ceebox script. [don’t change]

img folder – images
cee-*-btn.png – button images  [don’t change]
<video-frame>.png – one or more thumbnail images to display for videos [change for each video in package]
logo-mit-oeit.png – the MIT and OEIT logos  [don’t change]
spokenmedia-website-header.png – the SpokenMedia logo for page header  [don’t change]

index.html – the page containing the video(s) in package [change for each package]

jetty.xml – configuration file for the Jetty web server

js – javascripts
data.js – [change for each package]
jquery-1.4.2.min.js –  [don’t change]
jquery.ceebox-min.js –   [don’t change]
jquery.scrollTo.js –   [don’t change]
player.js –   [don’t change]
swfobject2.2.js –   [don’t change]

lib –

run.* – start-up script for Jetty web server.  Versions for MS Windows and Linux are included.  [don’t change]

swf –

transcripts – the video transcripts
.t1.html

Below is a mockup of what “paper based video” might look like.

Source: Brandon Muramatsu

Paper-based Video Interface Mockup

In the mockup you can see the options for HTML or PDF. Our colleagues at ICAP are very familiar with the capabilities of Adobe products and have suggested PDF as an output mechanism because it allows for embedding video inside the document. We’ll have to see how this video embedded in PDF degrades if there is no network connection, and whether we can easily create and maintain a screen capture version and an embedded video version. (More on the HTML option in a later post.)

We’ve taken one video by Prof. Walter Lewin and modified the corresponding MIT video page with the player. It works pretty well, right out of the box–there’s a bit of conflict with the CSS namespace. (Right now the demo only includes the first two minutes of the transcript since I was doing the editing by hand.)

8.01 Classical Physics I: Powers of Ten – Units – Dimensions – Measurements – Uncertainties – Dimensional Analysis – Scaling Arguments

Credit: Brandon Muramatsu

Updating the OCW Video Player with SpokenMedia

They are working on a new version of their virtual learning environment (VLE) — a learning management system (LMS) in American-speak — that has an integrated video player with a number of features of interest to SpokenMedia.

The player is Flash-based and provides the ability for users to create “bubbles” — or annotations/bookmarks — that overlay the video. These bubbles can be seen along a timeline, and can be used to provide feedback from teacher to student or highlight interesting aspects of the video.

Here’s a screenshot from the current version of the Spiral player:

Source: Christophe Battier/Spiral

Spiral Player with Bubbles

We discussed with them, integrating the aspects of the transcript display in the player we’ve been developing.

The user can watch the video and see the transcript with a “bouncing ball” highlighting the phrase being said. The user can switch between transcripts in multiple languages. And, the user can search through the transcript and playback the video by double clicking on the search result.

We talked about how the SpiralConnect team might extend their player to integrate transcripts and also create annotations that could be displayed below (or to the side of the video) and not just overlay the video image.

Here’s a mockup of what we discussed.

Source: Brandon Muramatsu

SpiralConnect plus SpokenMedia Transcript Mockup

Our goals with the player development:

• Javascript-player
• Play multiple videos on the same page
• Highlight the phrase corresponding to relevant point in the video
• Be able to switch between multiple audio tracks (if they are available)
• Be able to switch between transcripts in multiple languages (if they are available)
• Be able to search through a transcript, and play the video by clicking on the search result
• Be able to open source the player
• Include the OEIT logo

We worked with a great developer, Ryan Lee at voccs.com, to develop the player.

We used the player as part of our demo for the Indian Institute for Human Settlements.