Monday, April 30, 2018

YouTube Player


During my development for the upcomming "Arcade Player", i was initially using a core:html control with an iframe pointing to the video source. This solution was a little bit inadequate, because changing the videoId always reloaded the YouTube wrapping api script.

So i decided to write a custom UI5 control to be more flexible.

Currently, not every function and event is propagated to UI5, but i think you will get the point and be able to extend it concerning your additional needs.

YouTube Player API


Highlights


  • app showing usage of UI5 YouTube Player API Reference for iframe Embeds.
  • response grid layout to fit all device types
  • css hack to allow responsive defined aspect ratio of video (eg. 16/9 or 4/3)
  • wrapper methods and events to control video from UI5


Remarks

Currently there are some restrictions on playing videos on mobile devices. For security reasons, iOS does not allow to autoplay videos. A user interaction is therefore needed. Concerning this, the player itself will behave a little bit different on different devices, but the major api features should work accross. I also figured out, that setting volume is not working on my iOS devices, but there was no such comment in the google api description. I left the slider in (maybe a current bug). This is working on desktop and you can decide to hide the volume slider control by using the device model.


License

Released under the Apache license. Have at it.

The sources for this project can be found in my GitHub YouTube repository.

No comments:

Post a Comment

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.