Do I customize player UI by HTML5 JavaScript Media API or API provided by Shaka?

[Su]

Hi there,

I want to create a player UI so that it looks the same on every browser.

According to this post, Shaka player only deal with playing the video, we can indeed customize UI by HTML and CSS (I'm sorry, I'm rather new on these stuff, I still don't understand how to customize UI after reading the official document.).

I searched the web, and according to this article, HTML5 comes with a JavaScript Media API that allows developers access to and control of HTML5 media. I wonder if I can create a UI just by the way described in that article? or should I use the API provide by Shaka? 

Thanks in advance.

[Joey Parrish]

Hi Su,

Yes, you can build your own UI if you wish.  If you do this, you should turn off browser built-in controls, either by removing the "controls" attribute from the HTML5 video element or by setting video.controls = false.  Then you can create your own overlay in HTML/CSS and wire the buttons into various media APIs.

Shaka Player does not provide APIs which replace those on the HTML5 video element, so you can call those directly.  For other features Shaka provides, you can call the library API.

For example, to seek, you set video.currentTime using the HTML5 media API.  Similarly, to play and pause, you call video.play() or video.pause().

Some things can only be done through the player, because there are no equivalent HTML5 APIs for them.  To determine if the content is live (which may influence your overlay UI), you call player.isLive().  To load content, use player.load().  To engage trick play mode (AKA fast-forward and rewind), use player.trickPlay().  To change languages, call player.selectAudioLanguage() or player.selectTextLanguage().  And so on.  The Player API is here:

https://shaka-player-demo.appspot.com/docs/api/shaka.Player.html

You may also want to look at the Cast and Offline APIs:

https://shaka-player-demo.appspot.com/docs/api/shaka.cast.CastProxy.html

https://shaka-player-demo.appspot.com/docs/api/shaka.offline.Storage.html

You can also read the implementation of the custom controls in our demo app for more examples:

https://github.com/google/shaka-player/blob/master/demo/common/controls.js

https://github.com/google/shaka-player/blob/master/demo/common/controls.css

Does this help explain?

Thanks,

Joey

--
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-users+unsub...@googlegroups.com.
To post to this group, send email to shaka-player-users@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shaka-player-users/1e793fc8-956a-4583-8d97-a4fde9d01174%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Su]

Thanks Joey!

You have given pretty much information, wonderful, thank you very much!