Child pages
  • Matterhorn Engage Player

Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3


Engage's watch.js extracts information from URL parameters and or JSON to display video, annotation, segmentation and other things:

Engage expects the HTML page to have certain elements in order to work, as evident in watch.js and init-watch.js. To make it work with VoV, we can:

  • Refactor Engage so it becomes independent from the HTML page it lives on (preferred way, not sure if Opencast likes)
  • Provide Engage the HTML structure it wants (faster approach)
  • Modify what Engage expects to better suit our application (avoid unless necessary)

Looking at the demo, we see


Json examples. Theoretically, we could modify these REST endpoints to be pointing to Matterhorn server and the full featured Engage would just work, provided we don't run into cross-domain problems. JSONP helps with the crossdomain problems, with the exception of usertracking.

Code Block
 "analytics": "/usertracking/footprint.xml",
 "annotation": "/annotation/annotations.json",
 "episode": "/search/episode.json",
 "stats": "/usertracking/stats.json"
 "search": "/search/episode.json",
 "segments_text": "/search/episode.json",
 "segments_ui": "/search/episode.json",
 "segments": "/search/episode.json",
 "series": "/search/series.json",
 "episode": "/search/episode.json"
 "mediaPackageId": "",
 "mediaUrlOne": "",
 "mediaUrlTwo": "",
 "mediaResolutionOne": "",
 "mediaResolutionTwo": "",
 "mimetypeOne": "",
 "mimetypeTwo": ""


Code Block
svn checkout
cd trunk/modules/matterhorn-engage-player/
mvn clean install
cd ../../shared-resources/player/
mv matterhorn-engage-player-1.4-SNAPSHOT.swf Videodisplay.swf

Additional operation in the pom.xml file can copy the player files structure to a new directory, suitable to use with Hydrant.

Testing the Engage player


Code Block
"mediaUrlOne": "",
"mediaUrlTwo": "",

How to take out an Engage


Pieces independent from Matterhorn are Videodisplay.swf, FABridge.js, and Videodisplay.js. Theoretically we can embed Videodisplay.swf in a Flash object, use Videodisplay.js to hook the bridge up and setMediaURL. Doing this, I got the video cover to shows up, all Flash controls are there, but nothing happens when I click play.


Figure out which HTML elements we don't need and have javascript calls to detach() them.

Engage structure


Actual video player written in ActionScript


Segments UI


Embeded mode

Shows the player without Matterhorn Media Module components.

Replace 'watch.html' with 'embed.html' http://someURL:8080/engage/ui/watch.html?id=someMediaPackageId -> http://someURL:8080/engage/ui/embed.html?id=someMediaPackageId

Url parameters: