Paella Player 5Carlos Turró

Universitat Politècnica de València

Paella Player• Opencast-compatible video player

• Dual video• Media packages (slides, multiple language captions, other content)• In-video search

• Standalone video player• Legacy/Non-Opencast video player + Media packages• Compatible look and feel for end-users

• Live Streaming video player• Dual live video streaming• RTMP, MPEG-Dash, HLS*

• GPLv3, source code in Github

http://paellaplayer.upv.es

Paella Player 5 Update• Technical refactoring• Robustness• Easier to maintain

• MPEG-Dash Support• Easier to add new video protocols

• A new API for on-screen drawing• Annotations• Advertising

• As today, we are in 5.0.0 (branch release/5.0.0) finishing issues

Technical refactoring

Paella 4 problems• There are Asynchronous operations in Paella• E.g. load a video

• There is a lot of plugins waiting for those events to finish

Race conditionsNasty bugsDifficult to debug

Events• Paella communications between the core and the plugins is handled

through events• This is a bit odd, because the event both do the task and inform the

plugins paella.events.trigger(PLAY)

• Now the core requires an API call, and it generates the event when ready

paella.player.play()

• Paella 5 also uses Javascript promises to enforce serializable actions

Video Editor as a separate project

Video Editor as a separate project• Paella-editor is a now different Project

github.com/polimediaupv/paella-editor

• Paella will call this or any other editor (from the config file)

• Under development (release before summer)• Angular.js

MPEG-Dash support

MPEG-Dash• Dynamic Adaptive Streaming over HTTP• Breaking the video into a sequence of small segments and download on demand• Automatic or manual bandwidth selection• International standard• Codec agnostic

• Used by Netflix, YouTube, Hulu, Akamai• Available in Wowza, and also in OSS tools like DASHEncoder• Standard javascript video player library (dash.js)

.MPD index file

Multiple quality support in MPEG-Dash

External video plugins• Paella 5 allow defining external video players as plugins• MPEG-dash is using the reference dash.js player

• es.upv.paella.mpegDashPlayer• RTMP is using the paella.swf file

• es.upv.paella.rtmpPlayer

• Now is easier to integrate external players for new/other formats as external plugins

(paella with Vimeo or YouTube?)

New API for on-screen drawing

Demo• http://

paellaplayer.upv.es/demo/player_annotations/index.html?id=belmar-demo

API for onscreen drawing

• There is a new function to create or edit a canvas on top of Paella5paella.player.videoContainer.overlayContainer.getLayer()

• Then you can paint on top of it using standard HTML5//Draw a horizontal line in Paella

demoLayer = paella.player.videoContainer.overlayContainer.getLayer("demo")demoHR = document.createElement("hr");demoLayer.appendChild(demoHR);

Visual annotations plugin• A plugin to show notes at a predefined time, with a certain duration in a certain

location of the screen

User story: “As a teacher I want to be able to show HTML content to the students on top of the video at a certain playing time”

Activation through the config file{ "es.upv.paella.visualAnnotationPlugin": { "enabled": true, "url": "https://my.media.server/mynotes" }}

Presets

Ad

Presets

Banner

Presets

Note

Presets

Memo

Presets

Full

Annotation data

Caveats• Currently there is no editor to create the visual annotations

• There’s no API for feedback from the visual annotation plugin to the player

Some final comments

Some final comments• Paella 4.2 also released, with a lot of bug fixing

• Some plugins for Paella 4 have to be slightly adapted to work in Paella 5

• We have new docs ;-)Code Examples Cookbook

• Final release in early April (after Easter break)

Special thanks to our supporters and contributors• Suppporters• ETH Zürich

• Contributors• Harvard DCE, Teltek, @djcp, @jjeisig, @spiraleddy, @Alfro, @flyapen,

@rubenrua and all the issue spotters

Thanks!Questions?

turro@cc.upv.es

PromisesAsynchronous Callbackstarget.operation1(function(result) {    target.operation2(function(result) {        target.operation3(function(restult) {            target.operation4(function(result) {                            });        });    });}); 

Asynchronous Promisestarget.operation1()    .then(function(result) {        return target.operation2();    })        .then(function(result) {        return target.operation3();    })        .then(function(result) {        return target.operation4();    });

Multiple quality support in MPEG-Dash

MPEG-Dash demo• http://paellaplayer.upv.es/demo/player_mpegdash/index.html?id=mp

eg-dash

Video Editor as a separate project• Paella 4 shipped with an integrated editor, using the Opencast

Annotation service• The editor writes a track of elements related to video playing • Start• Stop• Break

• The player is a dependency of the editor, but the reverse is not true