document browser support and porting

[joeyparrish]

We need to document what features are required for a browser to be supported, as well as what can be done to add support for more browsers through polyfills.

Here's a very brief rundown until a full doc can be written.

Required features:

• HTML5 video
• MSE
• Promises

Optional features:

• EME
• WebVTT
• fullscreen API
• getVideoPlaybackQuality for QoE stats

Support test:
http://shaka-player-demo.appspot.com/support.html

[chrisleighton11]

Curious if IE11 is supported for clear dash. We have played around with poly filling promise and customevent with no luck. The console is showing errors when parsing the mpd.

[baseballbrad3]

I was able to get Internet Explorer 11 on Windows 8.1 to play back a DASH manifest. It wasn't perfect, but it's a start. Here's what I did.

• Got the latest Shaka from npm "npm install shaka-player" (currently v1.3.0)
• Added promise polyfill - https://github.com/taylorhakes/promise-polyfill
• Added CustomEvent polyfill - https://github.com/krambuhl/custom-event-polyfill
• Added document.currentScript polyfill - https://gist.github.com/JamesMGreene/fb4a71e060da6e26511d
• Changed all elem.children to elem.childNodes in lib/dash/mpd_parser.js
• Commented out this.video.currentTime = this.streamStartTime_; in lib/player/stream_video_source.js

I used the "Car (YT DASH test) - MP4" test manifest. It does adaption, but seeking is broken (which is why I think we needed to comment out the setter of currentTime). Chrome still worked like it did before.

It's very much a proof of concept. Also, I didn't try playing an encrypted file as I don't have a PlayReady license server setup.

[somerobmitchell]

I also got clear dash playback on IE11 / windows 8.1.
I am still adding a polyfill for the promises, was using an external js file as a poc. I did not have to add any other polyfills to the project. I just called shaka.polyfill.installAll(); when initialising the player.

I haven't changed the elem.children. This has not caused an issue for me. What errors did you see?

Instead of commenting out the line this.video.currentTime = this.streamStartTime_; I added an event listener to the video object and set the currentTime when loadedmetadata fired as per here.

I had no issues seeking. I have not tried it with the shaka manifests as I was using my companies own content.

My next target, after I get the promise polyfill completed is to playback PR encrypted streams.

[joeyparrish]

@baseballbrad3, some of these changes have already happened since v1.3.0, so please try the latest sources from master if you intend to work on browser support.

See a849f03, which removes reliance on node.children, 9ebd522, which adds a polyfill for CustomEvent, and 5a8a98f, which allows load.js to function without currentScript.

@rob-vualto, would you care to contribute a patch to set currentTime after loadedmetadata fires?

[jonoward]

Hey guys, we're interested in getting IE11/Edge to work with PlayReady protected content; I gave it a try after using the above work-arounds (thanks!). It fails because Shaka selects the no-op polyfill for MediaKeys (shaka.polyfill.PatchedMediaKeys.nop).

I think IE implements a different version of the EME spec compared to the latest and the older v01b - I believe it's this one - http://www.w3.org/TR/2014/WD-encrypted-media-20140218. So it may be possible to write a new polyfill for this implementation, but really I don't know how similar/different they are, or if this is possible. I'll spend a bit of time investigating...

[joeyparrish]

I believe an IE11 EME polyfill should be possible. If we can write one for Chrome's prefixed, non-OO EME, I presume IE11 should be simpler than that. IE's EME implementation isn't Promise-based or up-to-date, but it's object-oriented, so you should be able to wrap or alias things and just add a few extra methods.

[jonoward]

So I've spent a bit of time trying to implement a polyfill for EME spec v20140218, and did manage to get a very rough version working with our real PlayReady protected media. It's still a long way from a PR, but feel free to have a look at this commit:
blinkbox@79a80f0

A couple notes:

1. Will need a Promise polyfill for IE11 (Edge has support) - would you want to include an external dependency for this (e.g. Q) or add a custom implementation?
2. In IE11, creating a CustomEvent is causing an issue (even when it's been replaced on the window object); the target property is always null no matter what you do. One of the event handlers in eme_manager expects event.target to be set, so playback failed to start. Have added in a hack for now (added a "customTarget" property that eme_manager looks for in addition to "target"), but it's not a real solution. Again, Edge supports CustomEvent properly.
3. setMediaKeys can't be called on the video element before it's initialised (i.e. readyState == 0), so am having to defer to the loadstart event (but not blocking the Promise resolution, as nothing would load, so bit of a catch-22) - think this creates a race condition somewhere, as playback doesn't start about 20% of the time (but no errors).
4. In eme_manager, added a built-in license pre-processer for PlayReady, as it would require everyone to add in the same code in their own pre-processor. What do you think?

[joeyparrish]

@jonoward:

1. A Promise polyfill could be either something custom or something pre-existing.
   1a. If you're going to import something external, please take care that the license is compatible with ours (Apache 2.0). I would prefer something relatively simple, if possible.
   1b. The advantage I see for something custom is that it would play better with the closure compiler's advanced mode. I'm not sure what changes would be needed to adapt something pre-existing to our build, which is fairly strict.
   1c. One more option is to make a Promise polyfill a prerequisite for using Shaka Player on IE11. It could easily be included in a script tag before including Shaka Player. This is a bit lazy, but it would work.

My preference would be 1b, but I'm flexible.

1. Not sure what to do about CustomEvent. I haven't looked into this on IE11 myself. Does delete event.target and Object.defineProperties(event, {'target': ...}) in shaka.util.FakeEventTarget.prototype.dispatchEvent not work on IE11?
2. If setMediaKeys can't be called on the video without a source, this may be something you'll have handle in a monkey-patched version of HTMLMediaElement.setMediaKeys. Assuming, of course, that IE11 lets you patch over the native one at all.
3. I'll have to take a closer look at the code you referenced, but adding a default pre-processor sounds reasonable.

Thanks!

[jonoward]

@joeyparrish

1. Thinking about it, maybe option 1c is not unreasonable? I'm happy enough providing my own polyfill for older browsers. Is there a place where browser support is validated so that maybe a helpful error message is thrown if window.Promise is not available?
2. I've managed to get CustomEvent.target working with seperate Object.defineProperty calls rather than a single Object.defineProperties - I don't know why IE doesn't like Object.defineProperties, possible bug. In IE, event.target was always null, even if the preceding line set it to a non-null value, weird! See this commit blinkbox@8de489c - do you think this is a suitable work-around? Not widely tested, but works in Chrome and IE
3. Currently we're deferring the native videoEl.msSetMediaKeys to the loadedmetadata event, within the custom implementation of setMediaKeys in the new polyfill. This does seem to work, but I do think it's caused a race condition somewhere, as playback is still a little bit flaky, and I think this is one area where the order of execution could be varying. But I'm still working on this.

Cheers

[joeyparrish]

shaka.player.Player.isBrowserSupported() will return false if Promises are not available, but does not give detailed reports on what is missing.

I see that when you switched to defineProperty, you also switched from value/writable to get/set. Does defineProperty work with value/writable on IE11? I'm trying to understand if defineProperty is the necessary fix or if get/set is the necessary fix.

[joeyparrish]

In any case, let's continue discussion of IE on another issue. I will be writing a brief porting doc soon and will close this issue when that is done.