If you don't find an answer, please click here to post your question.
Reply
Occasional Collector
Posts: 3
Registered: ‎04-27-2018
Accepted Solution

v4 video player controls completely missing

I've recently switched to the v4 players and no matter what I do I can not see my player controls.  They don't show on hover, they don't show at all. 

 

I've used a "hack" where I just use document.querySelector and grab the video element directly and use video.controls = true to bring up the native web controls but then all of the OO events like Pause don't fire.  

 

 

<!-- This embed code automatically includes and packages standard Player V4 plugins. If you need a different mix of plugins, please use the Advanced embed option. To see the included plugins, please refer to this doc: http://help.ooyala.com/video-platform/concepts/pbv4_release_notes.html -->
<script src="//player.ooyala.com/core/----MY-ID-----"></script>
<!-- The following div will contain the instantiated player, and is identified by id --> <div id='video_container' ></div>
<!-- Player parameter modify some basic player behaviors and looks --> <script> var playerParam = { autoplay: true, pcode: 'my-pcode', playerBrandingId: 'my-branding-ID', onCreate : function where I subscribe to events, skin : { inline : { controlBar : { autoHide : false } } } }; OO.ready(function() {window.pp = OO.Player.create('video_container', '----MY-ID-----', playerParam);}); </script>

 


Accepted Solutions
Occasional Collector
Posts: 3
Registered: ‎04-27-2018

Re: v4 video player controls completely missing

I figured out the issue,  I wasn't using OO.ready.  Once I added that everything started working as expected.  I did not need to use skin config.  

 

thank you

 

 

OO.ready(()=> {
      this.player = OO.Player.create(id, content_id, myPlayerParamObject);
    });

 

 

View solution in original post


All Replies
Occasional Collector
Posts: 3
Registered: ‎04-27-2018

Re: v4 video player controls completely missing

This my full hack on how to work around the issue I'm experiencing now with my controls not showing.  I'm bascially listening for events on the native html5 video controls and using them to publish the OO.EVENTS.  I did it that way so I can easily remove this once I figure out how I get the OO custom controls to show

 

function nativePlayerSetup(ooPlayer){
  let firstPlay = true;
  
// play - OO.EVENTS.PLAY function onPlay(){ if (firstPlay) {return firstPlay = false;} ooPlayer.mb.publish(OO.EVENTS.PLAY); } // pause - OO.EVENTS.PAUSED function onPause() { ooPlayer.mb.publish(OO.EVENTS.PAUSED); } // ended - OO.EVENTS.PLAYED function onEnded(){ ooPlayer.mb.publish(OO.EVENTS.PLAYED); } let vids = document.querySelectorAll('video'); for (let i=0; i<vids.length; i++) { let vid = vids[i]; if (vid) { vid.controls = true; vid.addEventListener('play', onPlay); vid.addEventListener('pause', onPause); vid.addEventListener('ended', onEnded); vid.addEventListener('timeupdate', // timeupdate - OO.EVENTS.PLAYHEAD_TIME_CHANGED function onTimeUpdate() { ooPlayer.mb.publish(OO.EVENTS.PLAYHEAD_TIME_CHANGED, vid.currentTime, vid.duration); } ); } } }
Ooyalan
Posts: 4
Registered: ‎04-02-2018

Re: v4 video player controls completely missing

Hello!

Let me review this and I will get back to you.

 

Regards,
Miguel
Ooyala TS Engineer

Ooyalan
Posts: 4
Registered: ‎04-02-2018

Re: v4 video player controls completely missing

Hello,

Sorry for my late response.

I see that you are not using the skin.json on the player parameter, you need to have one.

Also, the player parameters have to be written in JSON syntax, you are missing a lot of " in the words.

Document about it:
http://help.ooyala.com/video-platform/concepts/pbv4_customize.html

Example:

 <script>
OO.ready(function() {
window.pp = OO.Player.create('video_container', '----MY-ID-----', {
"pcode": "my-pcode",
"playerBrandingId": "my-branding-ID",
"autoplay":true,
"skin": {
"config": "//player.ooyala.com/static/v4/production/skin-plugin/skin.json"
}
});
});

</script>
</body>
</html>

 

If you require more help, I would suggest opening a case in our http://help.ooyala.com/tech-support
Hope this helps,
Miguel
Ooyala TS Engineer

Occasional Visitor
Posts: 1
Registered: ‎05-02-2018

Re: v4 video player controls completely missing

[ Edited ]
Occasional Collector
Posts: 3
Registered: ‎04-27-2018

Re: v4 video player controls completely missing

I figured out the issue,  I wasn't using OO.ready.  Once I added that everything started working as expected.  I did not need to use skin config.  

 

thank you

 

 

OO.ready(()=> {
      this.player = OO.Player.create(id, content_id, myPlayerParamObject);
    });