Как в блок div вписать функцию JS

261

16 декабря 2018, 00:20

С конструктора взял вот такое размещение видео с автовоспроизведением в div-блоке:

<div class="node node126 widget widget-element" data-bgvideo="{&quot;bgVideo_Source&quot;:&quot;youtube&quot;,&quot;bgVideo_Youtube&quot;:&quot;http://www.youtube.com/watch?v=U3k2q7CaRRE&quot;,&quot;bgVideo_YoutubeImageSource&quot;:&quot;youtube&quot;,&quot;bgVideo_YoutubeImage&quot;:{&quot;file&quot;:&quot;//img.youtube.com/vi/3oem-M2tQU4/maxresdefault.jpg&quot;,&quot;size&quot;:[1920,1080],&quot;pack&quot;:&quot;users&quot;,&quot;datamix&quot;:{&quot;img&quot;:&quot;3.3&quot;}},&quot;bgVideo_Mp4&quot;:&quot;//s.filesonload.ru/bgvideo/island.mp4&quot;,&quot;bgVideo_Webm&quot;:&quot;//s.filesonload.ru/bgvideo/island.webm&quot;,&quot;bgVideo_Ogv&quot;:&quot;//s.filesonload.ru/bgvideo/island.ogv&quot;,&quot;bgVideo_DirectImage&quot;:{&quot;file&quot;:&quot;//s.filesonload.ru/bgvideo/island.jpg&quot;,&quot;size&quot;:[1280,720],&quot;pack&quot;:&quot;users&quot;,&quot;datamix&quot;:{&quot;img&quot;:&quot;3.3&quot;}}}"></div>

Меня интересует как можно прикрутить к блоку функцию воспроизведения при наведении мышкой и паузой, когда мышка покидает область действия:

<div style="text-align:center" onmouseover="Play()" onmouseout="Pause()"> 
  <video id="video1" width="480">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div>
<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 
function Pause()
{ 
  myVideo.pause(); 
}
function Play()
{
if (myVideo.paused) 
  myVideo.play();     
}    
</script>

В примере выше не удается разместить ссылку на видео с ютуба. Видимо читает только файлы с окончанием на формат видео. Я просто не знаком с этим, поэтому использую конструктор.

upd:

 document.getElementById('.node[data-bgvideo]').onmouseenter = function() { try { $(function() { try { return $(".node[data-bgvideo]").each(function() { try { var e, r; return e = $(this), r = e.data("bgvideo"), plp.lazy.add(e.removeAttr("data-bgvideo"), function(l) { try { var a; if ("youtube" === r.bgVideo_Source) return a = $("<div></div>").prependTo(e.children(".wrapper1")), a.data("property", { videoURL: r.bgVideo_Youtube, containment: a, mute: !0, autoplay: !0, showControls: !1 }).YTPlayer(); if ("direct" === r.bgVideo_Source || "library" === r.bgVideo_Source) return a = e.children(".wrapper1"), a.vide({ mp4: r.bgVideo_Mp4, webm: r.bgVideo_Webm, ogv: r.bgVideo_Ogv }, { mute: !0, autoplay: !0, loop: !0, posterType: "none" }) } catch (t) { error_handler(t, "libs_plp 3", arguments.callee) } }) } catch (l) { error_handler(l, "libs_plp 2", arguments.callee) } }) } catch (e) { error_handler(e, "libs_plp 1", arguments.callee) } }) } catch (e) { error_handler(e, "libs_plp 0", arguments.callee) } }.call(this), $(function() { try { plp.msg_error = function(e, r, l) { try { if ("xs" === plp.screen) { var a = r ? e + "\n" + r : e; return alert(a), void(l && l()) } return Modernizr.cssanimations ? swal({ title: e, text: r || null, type: "error" }, l) : swal({ title: e, text: r || null, imageUrl: "//s.platformalp.ru/swal/error.png" }, l) } catch (t) { error_handler(t, "libs_plp 1", arguments.callee) } }, plp.msg_success = function(e, r, l) { try { if ("xs" === plp.screen) { var a = r ? e + "\n" + r : e; return alert(a), void(l && l()) } return Modernizr.cssanimations ? swal({ title: e, text: r || null, type: "success" }, l) : swal({ title: e, text: r || null, imageUrl: "//s.platformalp.ru/swal/success.png" }, l) } catch (t) { error_handler(t, "libs_plp 2", arguments.callee) } } } catch (e) { error_handler(e, "libs_plp 0", arguments.callee) } }), $(function() { try { $("[data-ym_goal]").each(function() { try { var e = $(this),

Answer 1

document.getElementById('player').onmouseenter = function() { 
  // Do stuff 
  console.log("mouseenter"); 
} 
 
document.getElementById('player').onmouseout = function() { 
  // Do stuff 
  console.log("mouseout"); 
}

#player { 
  width: 100px; 
  height: 100px; 
  background: #333; 
  line-height: 100px; 
  font-size: 30px; 
  color: #fff; 
  text-align: center; 
}