8.5.2 myplayer.playbackRate() not working for Youtube.js 3.0.0?

[animdan]

Discussed in https://github.com/videojs/video.js/discussions/8420

^{Originally posted by **animdan** August 24, 2023} Awesome VideoJS project! I want to dynamically change Youtube Tech playback rate via a range input, and am currently using `myplayer.playbackRate()` which works fine for HTML5 tech but not for Youtube tech. When I change VideoJS supplied playbackrate button/menu with mouse or keyboard, it works on a Youtube video, but not programmatically, via `myplayer.playbackRate()`. I even swapped tech order ( Youtube, HTML5 ), but that didn't help either. I'm using VideoJS 8.5.2 with Youtube.js 3.0.0, any simple way I can dynamically change playback rate so it works for any tech?

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[animdan]

FIX (Temporary):

Ok so I devised a workaround by first setting up videojs player "playbackRates" array option like so (20 values are enough for this setup and complies within maximum number of current Youtube custom values) ... . . . playbackRates: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0], . . .

... in order to set up a range input to enumerate above rates values (1-20) so a function can use the value of their index for selection of available VJS playback rates, like so (jQuery):

/* $('#playbackrates-slider') calls a function (see code below) during use. li positions were reversed and eq() is 0-based, so Math.abs() applied to range input values, subtracted by 20, fixed that issue */

var pbrslider = $('#playbackrates-slider'); // range input var ulchildren = $('ul.vjs-menu-content li.vjs-menu-item'); // videojs speed menu li var ulchildindex = ulchildren.eq(Math.abs(pbrslider.val()-20));

ulchildindex.trigger('click'); // Dynamic clicking while changing pbrslider values pbrslider.focus(); // Keeps pbrslider back in focus

The above example works great for HTML5 and Youtube custom playback rates. Of course, if there is a way to only use VJS playbackRate() for any tech would be better, so if anyone has an answer for that, please let me know.

[mister-ben]

The default controls themselves call player.playbackRate(n), so setting the rate by API definitely works. See e.g. https://codepen.io/mister-ben/pen/YzdyrMP

[animdan]

Thx for swift reply MB. I couldn't get to test your pen on my system (video has loading icon running ad infinitum), but I noticed "my_video" playbackRates option is commented out in your sample code, plus, you only allow one tech (youtube) to be used. I'll see if that works on my end and give feedback, but I need a tech order of HTML5 + Youtube for my project.

[mister-ben]

Updated that code pen to include HTML5 in the tech order and it makes no difference. The playbackRates(n) will act on the current tech in use, irrespective of the tech order. The playbackRates option is for setting what is available to choose from in the standard control. Setting it or not has no effect on what rates can be set with the API. It's ultimately the tech (the You Tube player in this case) that decides what rate it will set to when requested. You can also query You Tube's player API to see the available rates with player.tech(true).ytPlayer.getAvailablePlaybackRates()

[animdan]

Still cannot get it to work at my end. I'll dig in deeper, something amiss here at my end. Thx for sample on how to query yt playback rates. Keep up good work! Closing issue with this comment.