{"id":14301,"date":"2022-08-09T12:03:37","date_gmt":"2022-08-09T15:03:37","guid":{"rendered":"https:\/\/jmvstream.com\/?p=14301"},"modified":"2022-08-09T15:05:40","modified_gmt":"2022-08-09T18:05:40","slug":"eventos-do-player","status":"publish","type":"post","link":"https:\/\/jmvstream.com\/en\/development\/eventos-do-player\/","title":{"rendered":"Player Events"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Follow the documentation to send and receive events via<\/span> postMessage<\/span><\/a> from our player<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row apply_row_margin=”individually” row_margin_bottom=”10px”][vc_column][vc_column_text]<\/p>\n

How to send<\/h2>\n

[\/vc_column_text][vc_column_text]To trigger the event you must make the postMessage code follow an example for this iframe:[\/vc_column_text][vc_column_text]<\/p>\n

<iframe allowfullscreen=\"\" class=\"iFrameVideos\" src=\"http:\/\/localhost:3000\/\"><\/iframe><\/pre>\n
[\/vc_column_text][vc_column_text]Make a selector query on the iframe[\/vc_column_text][vc_column_text]<\/p>\n
const iframeContent = document.querySelector('.iFrameVideos')<\/pre>\n
[\/vc_column_text][vc_column_text]Create the event JSON:[\/vc_column_text][vc_column_text]<\/p>\n
const func = {\r\n    time: 0,\r\n    public_event: 'jmvplayer-play'\r\n}<\/pre>\n
[\/vc_column_text][vc_column_text]Send it in the postMessage<\/strong>[\/vc_column_text][vc_column_text]<\/p>\n
iframeContent.contentWindow.postMessage(JSON.stringify(func),'*')<\/pre>\n
[\/vc_column_text][vc_column_text]Your event will then be fired in the player.[\/vc_column_text][\/vc_column][\/vc_row][vc_row apply_row_margin=”individually” row_margin_bottom=”10px”][vc_column][vc_column_text]<\/p>\n
How to Receive<\/h2>\n
[\/vc_column_text][vc_column_text]Send a player sync with event message:[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n    public_event: \"jmvplayer-sync\"\r\n}<\/pre>\n
[\/vc_column_text][vc_column_text]Implement function to listen to messages[\/vc_column_text][vc_column_text]<\/p>\n
window.addEventListener(\"message\", receiveMessage, false);\r\nfunction receiveMessage(event) {\r\n    console.log(event)\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Implement your logic for OUT events[\/vc_column_text][\/vc_column][\/vc_row][vc_row apply_row_margin=”individually” row_margin_bottom=”10px”][vc_column][vc_column_text]<\/p>\n
The events<\/h2>\n
[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayer-play<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n  time: 1\r\n  public_event: 'jmvplayer-play'\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Triggers a play event in the player. You can inform the team to say how long after this event will be triggered.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayer-jump<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n  jump: 1\r\n  public_event: 'jmvplayer-jump'\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Triggers a jump event in the video to a desired point, regardless of the position you are in.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayer-pause<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n  time: 2\r\n  public_event: 'jmvplayer-pause'\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Triggers a pause event in the player. You can inform the team to say how long after this event will be triggered.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayer-stop<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n  time: 2\r\n  public_event: 'jmvplayer-stop'\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Performs an iframe reload, forcing that frame back to the beginning of the video.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayer-jump<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n  jump: 1\r\n  public_event: 'jmvplayer-jump'\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Triggers a jump event in the video to a desired point, regardless of the position you are in.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayer-skip<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n  jump: 1\r\n  public_event: 'jmvplayer-skip'\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Triggers a jump event in the video to a certain desired point, in relation to the position you are in. If you pass the negative jump parameter, the player will try to rewind the video.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row apply_row_margin=”individually” row_margin_bottom=”10px”][vc_column][vc_column_text]<\/p>\n
OUT Events<\/h2>\n
[\/vc_column_text][vc_column_text]These events are responsible for informing what happened to the player, when the user submits an action that is with a listener.[\/vc_column_text][vc_column_text]To listen to these events it is necessary to send jmvplayer-sync[\/vc_column_text][vc_column_text]It brings some auxiliary variables like:<\/p>\n
currentTime:<\/strong> Current time of the video.<\/p>\n
duration:<\/strong> Total video time.<\/p>\n
eventName:<\/strong> Name of the executed event<\/p>\n
paused:<\/strong> informs 0 if the player is not stopped and 1 if it is stopped.[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayerout-play<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n      event: \"jmvplayerout-play\",\r\n      paused: 0,\r\n      duration: video.duration,\r\n      currentTime: video.currentTime,\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Sends the message when it triggers the play event.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayerout-pause<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n      event: \"jmvplayerout-pause\",\r\n      paused: 1,\r\n      duration: video.duration,\r\n      currentTime: video.currentTime,\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Sends the message when it triggers the pause event.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayerout-skip<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n      event: \"jmvplayerout-skip\",\r\n      paused: 0,\r\n      duration: video.duration,\r\n      currentTime: video.currentTime,\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Sends the message when it triggers the skip event.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayerout-skip<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n      event: \"jmvplayerout-end\",\r\n      duration: video.duration,\r\n      currentTime: video.currentTime,\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Send message when video ends.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n
jmvplayerout-status<\/b><\/h3>\n
[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n      event: \"jmvplayerout-status\",\r\n      paused: 0,\r\n      duration: video.duration,\r\n      currentTime: video.currentTime,\r\n}\r\n<\/pre>\n
[\/vc_column_text][vc_column_text]Sends the message when it triggers the timeupdate event.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
[vc_row][vc_column][vc_column_text]Follow the documentation to send and receive events via postMessage from our player[\/vc_column_text][\/vc_column][\/vc_row][vc_row apply_row_margin=”individually” row_margin_bottom=”10px”][vc_column][vc_column_text]<\/p>\n","protected":false},"author":39,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"documentation.php","format":"standard","meta":{"footnotes":""},"categories":[410,423],"tags":[],"class_list":["post-14301","post","type-post","status-publish","format-standard","hentry","category-development","category-player-events"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/posts\/14301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/comments?post=14301"}],"version-history":[{"count":0,"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/posts\/14301\/revisions"}],"wp:attachment":[{"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/media?parent=14301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/categories?post=14301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmvstream.com\/en\/wp-json\/wp\/v2\/tags?post=14301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}