The best way to use shaka as a library in a custom player

Leandro Moreira

unread,

Jul 26, 2015, 5:23:47 PM7/26/15

to Shaka Player Users

Hi,

First of all, congrats on the project, the shaka initiative is awesome. :)

I'm trying to use shaka as a playback to an existent player. I already did it for another type of playbacks, anyway, I usually follow this pattern:

Load needed dependencies => usually adding scripts (async and linking onload to bootstrap function).
Bootstrap playback => prepare the playback (setup)
Control the playback => control the playback (listening events and firing events too)

My first attempt to use shaka as a library was:

Load dependencies:

var script = document.createElement('script')
script.setAttribute("type", "text/javascript")
script.setAttribute("async", "async")
script.setAttribute("src", "//cdnjs.cloudflare.com/ajax/libs/shaka-player/1.4.0/shaka-player.compiled.js")
script.onload = () => bootstrapPlayback()
document.head.appendChild(script)

Setup the playback:

function bootstrapPlayback(){

var video = document.getElementById('video'); var player = new shaka.player.Player(video);

...

}

Control the playback:

Since shaka uses video tag, I thought to use video tag actions (play, pause, mute) and events (error, loadedmetadada ...) and some events fired by shaka.

Problems and questions:

I couldn't find shaka namespace (it wasn't on window), am I missing something here? isn't it public?
I would like to know any advices on the best way to use "shaka as a library"?

Thanks

tdr...@google.com

unread,

Jul 27, 2015, 12:39:07 PM7/27/15

to Shaka Player Users, leandro.rib...@gmail.com

Hi,

The most straightforward way is to do something like this,

<html>

<head>
<script src="shaka-player.compiled.js"></script>
<!-- Comment-out above line, and uncomment the lines below to use the uncompiled library

var video = document.getElementById('video');
var player = new shaka.player.Player(video);

var videoSource = new shaka.player.DashVideoSource(
'assets/feelings_vp9-20130806-manifest.mpd',
null /* interpretContentProtection */,
null /* estimator */,
null /* abrManager */);
player.load(videoSource);
</script>
</body>

</html>

This should also work,

<html>

<body>

var script = document.createElement('script')

script.setAttribute("src", "shaka-player.compiled.js")

document.head.appendChild(script)

script.onload = start;

function start() {

var video = document.getElementById('video');

var player = new shaka.player.Player(video);

var videoSource = new shaka.player.DashVideoSource(

'assets/feelings_vp9-20130806-manifest.mpd',

null /* interpretContentProtection */,

null /* estimator */,

null /* abrManager */);

player.load(videoSource);

}

</script>

</body>

</html>

Alternatively you can do something like we do for the Shaka Player demo page,

see https://github.com/google/shaka-player/blob/master/load.js

Also please see http://shaka-player-demo.appspot.com/docs/tutorial-errors.html:

you can use video.play(), video.pause(), video.currentTime = t, etc. when using Shaka

Player, but you should usually only listen for errors on the player object and not on

the video element itself.

Hope this resolves the issue for you.

Leandro Moreira

unread,

Jul 27, 2015, 1:09:38 PM7/27/15

to Shaka Player Users, tdr...@google.com

Thanks a lot =), I'm gonna try this way.

Leandro Moreira

unread,

Jul 27, 2015, 1:11:06 PM7/27/15

to Shaka Player Users, tdr...@google.com

is there anything wrong about loading the scripts in async way?

On Monday, July 27, 2015 at 1:39:07 PM UTC-3, tdr...@google.com wrote:

tdr...@google.com

unread,

Jul 27, 2015, 1:17:50 PM7/27/15

to Shaka Player Users, leandro.rib...@gmail.com

I don't believe so: adding script.setAttribute("async", "async"); to my second example should work.

That example is very similar to what you were originally doing, does it not work for you?

Leandro Moreira

unread,

Jul 27, 2015, 1:23:52 PM7/27/15

to Shaka Player Users, tdr...@google.com

It wasn't, the shaka namespace wasn't available at window. (a.k.a: shaka.player raises Uncaught ReferenceError: shaka is not defined)

I think the reason this happened was because I loaded the script from cdn cdnjs.cloudflare.com/ajax/libs/shaka-player/1.4.0/shaka-player.compiled.js and I'm not sure if this script is exposing shaka, anyway I'm gonna try with the compiled version generated by ./build/all.sh

Thanks again :)

Leandro Moreira

unread,

Jul 27, 2015, 10:04:24 PM7/27/15

to Shaka Player Users, tdr...@google.com

Hi,

I just tried your suggestions but none have worked :(

1) Compile the shaka (./build/all.sh), generating shaka-player.compiled.js

2) embed this script

3) and setup the player

function embedScript() {

var script = document.createElement("script");

script.setAttribute("type", "text/javascript");

script.setAttribute("src", "shaka-player.compiled.js");

document.head.appendChild(script);

}

function bootstrapPlayer() {

var url = "http://dash.edgesuite.net/dash264/TestCases/1c/qualcomm/2/MultiRate.mpd";

var video = $el; // this exist

var player = new shaka.player.Player(video); //it raises Uncaught ReferenceError: shaka is not defined

var videoSource = new shaka.player.DashVideoSource(url, null, null, null);

player.load(videoSource);

}

embedScript()
bootstrapPlayer()

And I even tried to replace the way I was embedding the script by following https://github.com/google/shaka-player/blob/master/load.js .

function embedScript() {

document.write('<script src="shaka-player.compiled.js"></script>');

}

Either way shaka object is not available at window (public). I might be doing something very silly.

Leandro Moreira

unread,

Jul 27, 2015, 10:14:06 PM7/27/15

to Shaka Player Users, tdr...@google.com, leandro.rib...@gmail.com

The funny thing is, if I try to use your plain html (both) it works, I'm gonna still try to figure it out what I'm doing wrong.

tdr...@google.com

unread,

Jul 28, 2015, 12:57:01 PM7/28/15

to Shaka Player Users, leandro.rib...@gmail.com

What about if you do this,

function embedScript(callback) {

var script = document.createElement("script");

script.setAttribute("type", "text/javascript");

script.setAttribute("src", "shaka-player.compiled.js");

script.onload = callback;

document.head.appendChild(script);

}

function bootstrapPlayer() {

// ...

}

embedScript(bootstrapPlayer);

Leandro Moreira

unread,

Jul 28, 2015, 8:49:30 PM7/28/15

to Shaka Player Users, tdr...@google.com

Thanks again, :) (I should send you a cake for so much help)

I tried this version too, it also failed. I think this is something related to the fact that I'm using ecma6 (transpiling/"compiling" to ecma5 by browserfy/babelify)..

My ideia is to integrate shaka into Clappr, I'm gonna check this thing about the final js generated.

ps: all your suggestions works when I use plain js.

Martin Duparc

unread,

Aug 19, 2015, 8:53:02 PM8/19/15

to Shaka Player Users

Regarding the "shaka is not defined" issue, I was able to get the player to work by removing RequireJS from my code (while using shaka-player.compiled.js).

Just FYI

Martin Duparc

unread,

Aug 19, 2015, 9:15:00 PM8/19/15

to Shaka Player Users

Quick update. If you include shaka-player.compiled.js before require.min.js, the player works fine.

Joey Parrish

unread,

Aug 20, 2015, 6:54:58 PM8/20/15

to Martin Duparc, Shaka Player Users

We have supported RequireJS for a while now, and I just checked and found that RequireJS is still working for me. Can you share a code snippet that shows the failure?

Here's a working one, FWIW:

function initPlayer() {

require(['shaka-player.compiled'], function(shaka) {

console.assert(!!shaka, 'shaka is locally defined');

console.assert(!window.shaka, 'shaka is not defined on window');

console.log('Shaka Player version', shaka.player.Player.version);

});

}

document.addEventListener('DOMContentLoaded', initPlayer);

</script>

--
You received this message because you are subscribed to the Google Groups "Shaka Player Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shaka-player-us...@googlegroups.com.
To post to this group, send email to shaka-pla...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shaka-player-users/02e1b221-d818-4059-bec6-b86fa4ab2ced%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Leandro Moreira

unread,

Aug 20, 2015, 8:44:49 PM8/20/15

to Shaka Player Users, martin...@gmail.com

We changed clappr to use webpack and then I tried shaka again to see if the adoption of wp would change anything but I'm still facing Uncaught ReferenceError: shaka is not defined.

Just to clarify I did the same steps as before (1. embed, 2. setup ...), although lately I didn't have time to look it in further detail, I hope I can do it soon.

Leandro Moreira

unread,

Aug 23, 2015, 4:26:32 PM8/23/15

to Martin Duparc, Shaka Player Users

Thanks Martin :)

--
You received this message because you are subscribed to a topic in the Google Groups "Shaka Player Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/shaka-player-users/WIia9KpWfIc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to shaka-player-us...@googlegroups.com.

To post to this group, send email to shaka-pla...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/shaka-player-users/bce5f933-12e3-4450-a94d-31fe16d72023%40googlegroups.com.

Leandro Moreira

unread,

Nov 6, 2015, 4:40:03 PM11/6/15

to Shaka Player Users

Just a heads up: I could create a playback plugin to Clappr using shaka-player as the base. It was easy:

declare it as dependency https://github.com/clappr/dash-shaka-playback/blob/master/package.json#L18
use it !! https://github.com/clappr/dash-shaka-playback/blob/master/index.js#L2

Thanks you all (shaka-player is amazingly easy to integrate, be proud, what a wonderful piece of code lol)

Joey Parrish

unread,

Nov 6, 2015, 5:13:35 PM11/6/15

to Leandro Moreira, Shaka Player Users

Thanks, Leandro! It's great to hear that.

--

You received this message because you are subscribed to the Google Groups "Shaka Player Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to shaka-player-us...@googlegroups.com.

To post to this group, send email to shaka-pla...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/shaka-player-users/9ebbf409-0d13-43f4-aec6-de5879175b89%40googlegroups.com.

Message has been deleted

Pie Cas

unread,

Feb 22, 2017, 4:17:50 AM2/22/17

to Shaka Player Users

Hi, sorry if i resume this post. I'd like see a simple html+js code with shaka library that plays my encrypted video (using shaka-packager) wth the following command:

packager input=LynyrdSkynyrdFreebird.mp4,stream=audio,output=LynyrdSkynyrdFreebirdAudio.mp4 input=LynyrdSkynyrdFreebird.mp4,stream=video,output=LynyrdSkynyrdFreebirdVideo.mp4 --profile on-demand --enable_widevine_encryption --key_server_url "https://license.uat.widevine.com/cenc/getcontentkey/widevine_test" --content_id "3031323334353637" --signer "widevine_test" --aes_signing_key "1ae8ccd0e7985cc0b6203a55855a1034afc252980e970ca90e5202689f947ab9" --aes_signing_iv "d58ce954203b7c9a9a9d467f59839249" --mpd_output example-av.mpd

Here i saw that it's necessary to configure the player in the following way:

player.configure({ drm: { servers: { 'com.widevine.alpha': '//widevine-proxy.appspot.com/proxy' } } });

But how to merge the two things? I hope you could help me. Thanks in advance.

Jacob Trimble

unread,

Feb 22, 2017, 1:01:21 PM2/22/17

to Shaka Player Users

You also asked this question on GitHub (https://github.com/google/shaka-player/issues/704), I will continue the discussion there.

Reply all

Reply to author

Forward