Ukázka spuštění html5 videa při najetí myši ve wordpressu

Nedávno jsem hledal, jak spustit video ve wordpressu při najetí kurzorem myši na video, ale nic jsem nenašel. Takže jsem si to zkusil napsat sám. Níže je můj kód, který funguje na video html5 ve wordpressu bez problému.

Ukážu Vám několik variant. Všechny videa na stránce musí být pod stejným názvem ID jinak nebudou fungovat.

Nejdříve musíme samozřejmě načíst javascriopt ve function.php (ve vaší šabloně) nebo java script načíst v hlavičce <head> </head>.

Pokud máme načtený script, tak stačí vložit html element pro přehrání videa ve wordpressu. <video> </video>.

Níže jsou možností přehrávání videa ve wordpressu.

 

1. Možnost bez úvodního obrázku:

<video id="video" class="video2" width="420">

<source src="http://0.s3.envato.com/h264-video-previews/80fad324-9db4-11e3-bf3d-0050569255a8/490527.mp4" type="video/mp4">

   Your browser does not support HTML5 video.

 </video>

 

2. možnost s obrázkem:

 

<video poster="http://www.smitwallpaper.com/wallpaper/original/cat-animals/just-an-octopus-1920x1080-wallpaper-14133.jpg" id="video" width="420">

   <source src="http://0.s3.envato.com/h264-video-previews/80fad324-9db4-11e3-bf3d-0050569255a8/490527.mp4" type="video/mp4">

   Your browser does not support HTML5 video.

</video>

Použitý Java-script pro ovládání obou možností přehrávání html5 videa ve wordpressu:

var vid = document.getElementsByTagName("video");

[].forEach.call(vid, function (item) {

item.addEventListener('mouseover', hoverVideo, false);

item.addEventListener('mouseout', hideVideo, false);

item.addEventListener('ended',function(){
this.currentTime = 5;
});

});

function hoverVideo(e)

{

this.play();
this.currentTime = 0;
// this.setTimeout(video.pause(), (endtimeoffset - starttimeoffset)*2000);
}

function hideVideo(e)

{

this.pause();
this.currentTime = 0; //timto se nastavi ze po odjeti mysi se video nastavi na zacatek

}

 

3. poslední ukázka přehrávání videa po najetí myši – videou se spustí od začátku

<video id="video" poster="http://www.smitwallpaper.com/wallpaper/original/cat-animals/just-an-octopus-1920x1080-wallpaper-14133.jpg" width="420" height="150">   <source src="http://0.s3.envato.com/h264-video-previews/80fad324-9db4-11e3-bf3d-0050569255a8/490527.mp4" type="video/mp4" />Your browser does not support HTML5 video.
</video>

 

var vid = document.getElementsByTagName("video");

[].forEach.call(vid, function (item) {

item.addEventListener('mouseover', hoverVideo, false);

item.addEventListener('mouseout', hideVideo, false);

item.addEventListener('ended',function(){
this.currentTime = 5;
});

});

function hoverVideo(e)

{

this.play();
this.currentTime = 0;
// this.setTimeout(video.pause(), (endtimeoffset - starttimeoffset)*2000);
}

function hideVideo(e)

{

this.pause();
this.currentTime = 0; //timto se nastavi ze po odjeti mysi se video nastavi na zacatek

}

 

Stažení ukázky

(262)

Při najetí myši spustí html5 video

6 komentářů

  • jwkk
    Odpovědět

    Je to super, tohle jsem potřeboval. Mám jen jednu otázku a to jak za udělat aby se video začalo stahovat až po najetí myši. Podle tohoto návodu se video načítá se stránkou 🙁 což při takových 50-ti videí na stránce by byl problém. Ještě jak zařídit aby se po odjetí myši zobrazil zpět obrázek. Moc moc prosím o odpověď.

    • Jan Lasac
      Odpovědět

      Zdravim, děkuji za komentář a jsem rád, že článek našel využití.. 🙂
      Jinak k otázkám:
      Až takhle detailněji jsem to neřešil, ale pro načítání obrázků se používá Lazy loading. U videa by to mělo fungovat také, ale nemám to vyzkoušené.. Každopádně bych vyzkoušel tento jquery plugin, pokud je to html5 video a pokud je to video z youtube, tak tento plugin a nebo vyzkoušet plugin pro wordpress – Lazy Load for Videos , který je kompatibilní i s novou vezí wordpressu..
      Stačí Vám tato odpověď?

        • Jan Lasac
          Odpovědět

          Koukal jsem na ty stránky a všichni mají malé rozlišení videa (cca 150×100), a nejsou tak kvalitní, takže není potřeba žádné postupné načítání videa..
          Můžete teda přesněji specifikovat co hledáte?

          • Jan Lasac

            Ukázky webů co jste posílal to mají řešené pomocí Flash aplikace, kde se vše nastaví pomocí scriptu. Ale myslím si, že všechny videa také načítají najednou a ne po najetí myší.. Používají nějakou cache paměť..
            Jinak si myslím, že by ten můj script šel použít na Vaše stránky, kdyby se tam vložily videa v nízkém rozlišení a požít samozřejmě cache paměť..

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>