{"id":14385,"date":"2022-08-09T17:26:48","date_gmt":"2022-08-09T20:26:48","guid":{"rendered":"https:\/\/jmvstream.com\/eventos-del-player\/"},"modified":"2022-08-09T17:42:45","modified_gmt":"2022-08-09T20:42:45","slug":"eventos-del-player","status":"publish","type":"post","link":"https:\/\/jmvstream.com\/es\/developer-es\/eventos-del-player\/","title":{"rendered":"Eventos Del Player"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<span style=\"font-weight: 400;\">Siga la documentaci\u00f3n para enviar y recibir eventos a trav\u00e9s de<\/span><a href=\"https:\/\/developer.mozilla.org\/pt-PT\/docs\/Web\/API\/Window\/postMessage\"> <span style=\"font-weight: 400;\">postMessage<\/span><\/a><span style=\"font-weight: 400;\"> de nuestro reproductor<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row apply_row_margin=&#8221;individually&#8221; row_margin_bottom=&#8221;10px&#8221;][vc_column][vc_column_text]<\/p>\n<h2>C\u00f3mo enviar<\/h2>\n<p>[\/vc_column_text][vc_column_text]Para desencadenar el evento debes hacer que el c\u00f3digo de postMessage siga un ejemplo para este iframe:[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;iframe allowfullscreen=\"\" class=\"iFrameVideos\" src=\"http:\/\/localhost:3000\/\"&gt;&lt;\/iframe&gt;<\/pre>\n<p>[\/vc_column_text][vc_column_text]Hacer un selector de consulta en el iframe[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">const iframeContent = document.querySelector('.iFrameVideos')<\/pre>\n<p>[\/vc_column_text][vc_column_text]Crear el JSON del evento:[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">const func = {\r\n    time: 0,\r\n    public_event: 'jmvplayer-play'\r\n}<\/pre>\n<p>[\/vc_column_text][vc_column_text]Env\u00edalo en el <strong>postMessage<\/strong>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">iframeContent.contentWindow.postMessage(JSON.stringify(func),'*')<\/pre>\n<p>[\/vc_column_text][vc_column_text]Su evento se activar\u00e1 entonces en el jugador.[\/vc_column_text][\/vc_column][\/vc_row][vc_row apply_row_margin=&#8221;individually&#8221; row_margin_bottom=&#8221;10px&#8221;][vc_column][vc_column_text]<\/p>\n<h2>C\u00f3mo recibir<\/h2>\n<p>[\/vc_column_text][vc_column_text]Env\u00eda un mensaje de sincronizaci\u00f3n del reproductor con el evento:[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n    public_event: \"jmvplayer-sync\"\r\n}<\/pre>\n<p>[\/vc_column_text][vc_column_text]Implementar la funci\u00f3n de escuchar los mensajes[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">window.addEventListener(\"message\", receiveMessage, false);\r\nfunction receiveMessage(event) {\r\n    console.log(event)\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Implementar su l\u00f3gica para los eventos <strong>OUT<\/strong>[\/vc_column_text][\/vc_column][\/vc_row][vc_row apply_row_margin=&#8221;individually&#8221; row_margin_bottom=&#8221;10px&#8221;][vc_column][vc_column_text]<\/p>\n<h2>Los eventos<\/h2>\n<p>[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayer-play<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n  time: 1\r\n  public_event: 'jmvplayer-play'\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Activa un evento de juego en el jugador. Puede introducir un tiempo para indicar cu\u00e1nto tiempo despu\u00e9s se activar\u00e1 este evento.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayer-jump<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n  jump: 1\r\n  public_event: 'jmvplayer-jump'\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Activa un evento de salto en el v\u00eddeo a un punto deseado, independientemente de d\u00f3nde se encuentre.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayer-pause<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n  time: 2\r\n  public_event: 'jmvplayer-pause'\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Activa un evento de pausa en el reproductor. Puede indicar al equipo el tiempo tras el cual se activar\u00e1 este evento.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayer-stop<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n  time: 2\r\n  public_event: 'jmvplayer-stop'\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Recarga el iframe, forzando ese fotograma al principio del v\u00eddeo.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayer-jump<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n  jump: 1\r\n  public_event: 'jmvplayer-jump'\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Activa un evento de salto en el v\u00eddeo a un punto deseado, independientemente de d\u00f3nde se encuentre.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayer-skip<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n  jump: 1\r\n  public_event: 'jmvplayer-skip'\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Activa un evento de salto en el v\u00eddeo a un punto deseado, relativo a la posici\u00f3n en la que se encuentra. Si pasas el par\u00e1metro de salto negativo el reproductor intentar\u00e1 rebobinar el v\u00eddeo.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row apply_row_margin=&#8221;individually&#8221; row_margin_bottom=&#8221;10px&#8221;][vc_column][vc_column_text]<\/p>\n<h2><b>Eventos OUT<\/b><\/h2>\n<p>[\/vc_column_text][vc_column_text]Estos eventos se encargan de informar de lo que le ocurre al jugador cuando el usuario realiza alguna acci\u00f3n que tiene un oyente.[\/vc_column_text][vc_column_text]Para escuchar este evento es necesario enviar <strong>jmvplayer-sync<\/strong>[\/vc_column_text][vc_column_text]Trae algunas variables auxiliares como:<\/p>\n<p><b>currentTime<\/b><span style=\"font-weight: 400;\">: Hora actual del v\u00eddeo.<\/span><\/p>\n<p><b>duration<\/b><span style=\"font-weight: 400;\">: Tiempo total del v\u00eddeo.<\/span><\/p>\n<p><b>eventName<\/b><span style=\"font-weight: 400;\">: Nombre del evento ejecutado.<\/span><\/p>\n<p><b>paused<\/b><span style=\"font-weight: 400;\">: informa 0 si el Player no est\u00e1 pausado y 1 si est\u00e1 pausado.<\/span>[\/vc_column_text][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayerout-play<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\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<p>[\/vc_column_text][vc_column_text]Env\u00eda el mensaje cuando se activa el evento de reproducci\u00f3n.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayerout-pause<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\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<p>[\/vc_column_text][vc_column_text]Env\u00eda el mensaje cuando se activa el evento de pausa.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayerout-skip<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\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<p>[\/vc_column_text][vc_column_text]Env\u00eda el mensaje cuando activa el evento de omisi\u00f3n.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayerout-skip<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\r\n      event: \"jmvplayerout-end\",\r\n      duration: video.duration,\r\n      currentTime: video.currentTime,\r\n}\r\n<\/pre>\n<p>[\/vc_column_text][vc_column_text]Env\u00ede el mensaje cuando termine el v\u00eddeo.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][vc_column_text]<\/p>\n<h3><b>jmvplayerout-status<\/b><\/h3>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\">{\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<p>[\/vc_column_text][vc_column_text]Env\u00eda el mensaje cuando se activa el evento timeupdate.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text]Siga la documentaci\u00f3n para enviar y recibir eventos a trav\u00e9s de postMessage de nuestro reproductor[\/vc_column_text][\/vc_column][\/vc_row][vc_row<\/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":[424,429],"tags":[],"class_list":["post-14385","post","type-post","status-publish","format-standard","hentry","category-developer-es","category-eventos-del-player-es"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/posts\/14385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/comments?post=14385"}],"version-history":[{"count":0,"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/posts\/14385\/revisions"}],"wp:attachment":[{"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/media?parent=14385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/categories?post=14385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmvstream.com\/es\/wp-json\/wp\/v2\/tags?post=14385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}