embedly / player.js

Control embedded video and audio across multiple providers
playerjs.io
BSD 3-Clause "New" or "Revised" License
534 stars 177 forks source link

PlayerJs Methods not working #82

Open MacwanAkash opened 4 years ago

MacwanAkash commented 4 years ago

I am working with kaltura vidoes and inorder to interact with the videos using player.js (player-0.0.10.min.js). I am able to get iframe instance in variable but when i try to call methods it is not working. Below is the code that i am using.

`var kaltura_script = document.createElement('SCRIPT') kaltura_script.type = 'text/javascript' kaltura_script.src = '//cdn.embed.ly/player-0.0.10.min.js' document.head.appendChild(kaltura_script);

var player = new playerjs.Player( document.getElementById('kaltura_player'));

player.play() // This part is not working`

Apart from that in player variable i can see the methods that are being called are in queue.

d.Player {elem: iframe#kaltura_player, origin: "https://cdnapisec.kaltura.com", keeper: d.Keeper, isReady: false, queue: Array(3), …} elem: iframe#kaltura_player events: (7) ["ready", "play", "pause", "ended", "timeupdate", "progress", "error"] isReady: false keeper: d.Keeper {data: {…}} methods: (15) ["play", "pause", "getPaused", "mute", "unmute", "getMuted", "setVolume", "getVolume", "getDuration", "setCurrentTime", "getCurrentTime", "setLoop", "getLoop", "removeEventListener", "addEventListener"] origin: "https://cdnapisec.kaltura.com" queue: Array(3) 0: {method: "play", context: "player.js", version: "0.0.10"} 1: {method: "play", context: "player.js", version: "0.0.10"} 2: {method: "pause", context: "player.js", version: "0.0.10"} length: 3 proto: Array(0) proto: Object

mightyiam commented 4 years ago

@MacwanAkash could you please edit the post to use fenced code blocks?

ditorodev commented 3 years ago

It is possible that at the time of calling player.play() method the player is yet not ready to work(instantiated), this happened to me too, in order to fix this just wrap de player.play() inside a player.on('ready' () => /*callback*/) event

example:

var kaltura_script = document.createElement('SCRIPT')
kaltura_script.type = 'text/javascript'
kaltura_script.src = '//cdn.embed.ly/player-0.0.10.min.js'
document.head.appendChild(kaltura_script);

var player = new playerjs.Player( document.getElementById('kaltura_player'));

player.play() // This part is not working

is now this

var kaltura_script = document.createElement('SCRIPT')
kaltura_script.type = 'text/javascript'
kaltura_script.src = '//cdn.embed.ly/player-0.0.10.min.js'
document.head.appendChild(kaltura_script);

var player = new playerjs.Player( document.getElementById('kaltura_player'));

player.on('ready', () => player.play()); // This part is now working