Při najetí myši spustí html5 video
Blog o wordpressu
Rating: 6.8 / 10
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
(416)
