{"id":138,"date":"2017-08-31T18:42:58","date_gmt":"2017-08-31T21:42:58","guid":{"rendered":"http:\/\/hackerzone.com.br\/blog\/?p=138"},"modified":"2017-08-31T18:42:58","modified_gmt":"2017-08-31T21:42:58","slug":"galeria-owlcarousel-com-video-e-autoplay","status":"publish","type":"post","link":"http:\/\/hackerzone.com.br\/blog\/galeria-owlcarousel-com-video-e-autoplay\/","title":{"rendered":"Galeria OwlCarousel com v\u00eddeo e autoplay"},"content":{"rendered":"<p>Estive tentando manipular uma galeria OwlCaroulsel com v\u00eddeo, no tema porto do wordpress, mas quando eu adicionava um item do tipo v\u00eddeo ele n\u00e3o dava autoplay&#8230; Eu precisava clicar manualmente, mesmo tentando atacar por javascript ele n\u00e3o dava play, apenas quando clicava na barra de controle do v\u00eddeo.<\/p>\n<p>Ent\u00e3o comecei minha caminhada para tentar solucionar este problema, cheguei na conclus\u00e3o que precisaria adicionar o elemento de v\u00eddeo dinamicamente, acredito que seja uma trava de seguran\u00e7a se caso o v\u00eddeo estiver oculto na p\u00e1gina, n\u00e3o deixar dar autoplay, tendo em vista que ele era o \u00faltimo item da galeria.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\njQuery(document).ready(function(){\r\n\r\n    jQuery(document).on('translate.owl.carousel', function (e) {\r\n        $('.owl-item video').each(function () {\r\n            $(this).get(0).pause();\r\n        });\r\n    });\r\n    jQuery(document).on('translated.owl.carousel', function (e) {\r\n        if ($('.owl-item.active video').get(0)) {\r\n            $('.owl-item.active video').get(0).play();\r\n        }\r\n    });\r\n   \r\n    $('.owl-item .item').each(function () {\r\n         var attr = $(this).attr('data-videosrc');\r\n         if (typeof attr !== typeof undefined &amp;&amp; attr !== false) {\r\n                console.log('hit');\r\n                var videosrc = $(this).attr('data-videosrc');\r\n                $(this).prepend('&lt;video muted autopay loop&gt;&lt;source src=&quot;' + videosrc + '&quot; type=&quot;video\/mp4&quot;&gt;&lt;\/video&gt;');\r\n            }\r\n        });\r\n        $('.owl-item.active video').attr('autoplay', true).attr('loop', true);   \r\n\r\n});\r\n<\/pre>\n<p>Fonte: https:\/\/codepen.io\/franchert\/pen\/xOrrqZ<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Estive tentando manipular uma galeria OwlCaroulsel com v\u00eddeo, no tema porto do wordpress, mas quando eu adicionava um item do tipo v\u00eddeo ele n\u00e3o dava autoplay&#8230; Eu precisava clicar manualmente, mesmo tentando atacar por javascript ele n\u00e3o dava play, apenas quando clicava na barra de controle do v\u00eddeo. Ent\u00e3o comecei minha caminhada para tentar solucionar [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[32,59,60,61],"class_list":["post-138","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-owlcarousel","tag-owlcarousel-video","tag-video-autoplay","cat-29-id"],"_links":{"self":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":1,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":139,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions\/139"}],"wp:attachment":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}