HTML5 Plusieurs d'Affichage Vidéo - Passez la souris pour Jouer

Bon alors j'ai suivi un bon tutoriel concernant l'intégration de vidéos via la balise vidéo HTML5, qui peut être trouvé ici. L'idée de base est que, placez le curseur de la vidéo joue, sur le vol stationnaire hors il s'arrête de jouer.

Bien, j'ai essayé d'inclure plusieurs vidéos sur une seule page (tout de même la vidéo, vous l'esprit) dans l'espoir que je pouvais créer une sorte de interactifs multi-carrelage conseil d'administration de toutes sortes. En d'autres termes, vous placez le pointeur sur chaque vidéo, il crée différentes images en fonction de l'endroit où dans chaque vidéo, vous vous retrouvez, etc.

Que ce soit, la question que je pose est: basé sur ce tutoriel que j'ai suivi, quel est le meilleur moyen de créer plusieurs, sol carrelé vidéos? Je vais coller le code que j'ai travaillé avec. Le problème que je vais avoir, c'est que si je créer plusieurs fonctions javascript, il ne montre que la vidéo de la dernière fonction que j'ai créé, plutôt que toutes les vidéos.

J'espère que cela a du sens. Ici est le lien de ce que j'ai travaillé jusqu'à présent. REMARQUE: la vidéo prend un certain temps à charger, donc, jusque-là, il va jouer le son mais pas l'image.

Merci d'avance pour toute aide!

InformationsquelleAutor Peter | 2012-02-16
  1. 2

    Voici la solution que j'ai trouvé:
    Le seul avertissement que je vous donne est de mettre les vidéos de preload="none" parce que si ils sont tous de la charge, il sera cauchemar de votre bande passante. J'ai dû changer de la mienne et maintenant, je suis à la recherche d'une solution à laisser les gens savent une vidéo est en cours de chargement.

    var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
    item.addEventListener('mouseover', hoverVideo, false);
    item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e)
{   
    this.play();
}
function hideVideo(e)
{
    this.pause();
}

    C'est là que j'ai eu la réponse: http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/

    InformationsquelleAutor Deyson
  2. 0

    Pour quelqu'un qui cherche à réaliser cela à l'aide de jQuery, voici une solution que j'utilise pour charger dynamiquement du contenu: 

            //play video on hover
        $(document).on('mouseover', 'video', function() { 
            $(this).get(0).play(); 
        }); 

        //pause video on mouse leave
        $(document).on('mouseleave', 'video', function() { 
            $(this).get(0).pause(); 
        });

    Ceci peut être utilisé pour une page avec 1 - N des vidéos, et seul le planait vidéo sera lue à chaque fois, même si chaque pause sur l'image actuelle sur mouseleave.

    Voici un exemple de cela dans l'action: http://jsfiddle.net/cc7w0pda/

    InformationsquelleAutor jacobedawson
  3. -1

    Essayez, il est facile de comprendre

    HTML:

    <!DOCTYPE html>
<html>
<video id="vv" width="500" height="500" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="xx.mp4">
Your browser does not support this file
</video>
</html>

    InformationsquelleAutor Tahra