{"id":14291,"date":"2022-08-09T10:23:59","date_gmt":"2022-08-09T13:23:59","guid":{"rendered":"https:\/\/jmvstream.com\/?p=14291"},"modified":"2022-08-09T17:42:58","modified_gmt":"2022-08-09T20:42:58","slug":"eventos-do-player","status":"publish","type":"post","link":"https:\/\/jmvstream.com\/pt-br\/developer\/eventos-do-player\/","title":{"rendered":"Eventos Do Player"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Siga a documenta\u00e7\u00e3o para enviar e receber eventos via<\/span> postMessage<\/span><\/a> do nosso 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

Como Enviar<\/h2>\n

[\/vc_column_text][vc_column_text]Para disparar o evento voc\u00ea deve fazer o c\u00f3digo de postMessage siga um exemplo para este iframe:<\/span>[\/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]Fa\u00e7a um query selector no iframe<\/span>[\/vc_column_text][vc_column_text]<\/p>\n
const iframeContent = document.querySelector('.iFrameVideos')<\/pre>\n
[\/vc_column_text][vc_column_text]Crie o JSON do evento:<\/span>[\/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]Envie\u00a0ele\u00a0no\u00a0postMessage<\/strong>[\/vc_column_text][vc_column_text]<\/p>\n
iframeContent.contentWindow.postMessage(JSON.stringify(func),'*')<\/pre>\n
[\/vc_column_text][vc_column_text]Seu evento ent\u00e3o ser\u00e1 disparado no 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
Como Receber<\/b><\/h2>\n
[\/vc_column_text][vc_column_text]Envie uma menssagen de syncroniza\u00e7\u00e3o do player com evento:<\/span>[\/vc_column_text][vc_column_text]<\/p>\n
{\r\n    public_event: \"jmvplayer-sync\"\r\n}<\/pre>\n
[\/vc_column_text][vc_column_text]Implemente fun\u00e7\u00e3o para ouvir menssagens<\/span>[\/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]Implemente suas l\u00f3gicas para os eventos OUT<\/strong><\/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
Os Eventos<\/b><\/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]Dispara um evento de play no player. Voc\u00ea pode informar o time para diser quanto tempo depois esse evento sera disparado.<\/span>[\/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]Dispara um evento de salto no v\u00eddeo para determinado ponto desejado, independente da posi\u00e7\u00e3o que voc\u00ea esta.<\/span>[\/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]Dispara um evento de pause no player. Voc\u00ea pode informar o time para diser quanto tempo depois esse evento sera disparado.<\/span>[\/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]Realiza um reload do iframe, for\u00e7ando aquele frame voltar ao inicio do v\u00eddeo.<\/span>[\/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]Dispara um evento de salto no v\u00eddeo para determinado ponto desejado, independente da posi\u00e7\u00e3o que voc\u00ea esta.<\/span>[\/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]Dispara um evento de salto no v\u00eddeo para determinado ponto desejado, em rela\u00e7\u00e3o a posi\u00e7\u00e3o que voc\u00ea esta. Caso passe o par\u00e2metro jump negativo o player ira tentar retroceder o v\u00eddeo.<\/span>[\/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
Eventos OUT<\/b><\/h2>\n
[\/vc_column_text][vc_column_text]Estes eventos s\u00e3o responsaveis para informar o que esta aconteceu com o player, quando o usuario submete alguma a\u00e7\u00e3o que esta com um listener.<\/span>[\/vc_column_text][vc_column_text]Para ouvir estes evento \u00e9 necessario enviar jmvplayer-sync<\/strong><\/span>[\/vc_column_text][vc_column_text]Ele tr\u00e1s algumas vari\u00e1veis auxiliares como:<\/span><\/p>\n
currentTime<\/b>: Tempo atual do v\u00eddeo.<\/span><\/p>\n
duration<\/b>: Tempo Total do v\u00eddeo.<\/span><\/p>\n
eventName<\/b>: Nome do evento executado<\/span><\/p>\n
paused<\/b>: informa 0 se o player n\u00e3o esta parado e 1 se esta parado.<\/span>[\/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]Envia a mensagem quando aciona o evento de play.<\/span>[\/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]Envia a mensagem quando aciona o evento de pause.<\/span>[\/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]Envia a mensagem quando aciona o evento de skip.[\/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]Envia a mensagem quando v\u00eddeo termina.<\/span>[\/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]Envia a mensagem quando aciona o evento de timeupdate.<\/span>[\/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]Siga a documenta\u00e7\u00e3o para enviar e receber eventos via postMessage do nosso 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":[415,422],"tags":[],"class_list":["post-14291","post","type-post","status-publish","format-standard","hentry","category-developer","category-eventos-do-player"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/posts\/14291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/comments?post=14291"}],"version-history":[{"count":0,"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/posts\/14291\/revisions"}],"wp:attachment":[{"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/media?parent=14291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/categories?post=14291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmvstream.com\/pt-br\/wp-json\/wp\/v2\/tags?post=14291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}