Video-Wiedergabe auf hover

Habe ich eine Auswahl von video-thumbnails, die ich auslösen wollen, um zu spielen/pause auf hover. Ich habe es geschafft, einen von Ihnen zu arbeiten, aber ich habe ein problem mit den anderen auf der Liste. Befestigt ist die Geige von meinem code. Es wird ein div zu jedem html5-video, so dass der hover-Bedürfnisse zu delegieren, um die Videos, die ich bin nicht sicher, wie zu tun ist.

http://jsfiddle.net/meh1aL74/

Vorschau der html-hier -

<div class="video">
            <div class="videoListCopy">
                <a href="videodetail.html" class="buttonMore">
                        <div class="breaker"><div class="line"></div></div>
                        <div class="buttonContent">
                            <div class="linkArrowContainer">
                                <div class="iconArrowRight"></div>
                                <div class="iconArrowRightTwo"></div>
                            </div>
                            <span>Others</span>
                        </div>
                    </a>
            </div>
            <div class="videoSlate">
                <video class="thevideo" loop>
                  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
                Your browser does not support the video tag.
                </video>
            </div>
        </div>


          <div class="video">
            <div class="videoListCopy">
                <a href="videodetail.html" class="buttonMore">
                        <div class="breaker"><div class="line"></div></div>
                        <div class="buttonContent">
                            <div class="linkArrowContainer">
                                <div class="iconArrowRight"></div>
                                <div class="iconArrowRightTwo"></div>
                            </div>
                            <span>Others</span>
                        </div>
                    </a>
            </div>
            <div class="videoSlate">
                <video class="thevideo" loop>
                  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
                Your browser does not support the video tag.
                </video>
            </div>
        </div>

Vorschau der javascript-hier -

    var figure = $(".video");
    var vid = $("video");

    [].forEach.call(figure, function (item) {
            item.addEventListener('mouseover', hoverVideo, false);
            item.addEventListener('mouseout', hideVideo, false);
    });

    function hoverVideo(e) {  
            $('.thevideo')[0].play(); 
    }

    function hideVideo(e) {
            $('.thevideo')[0].pause(); 
    }

Danke Ihnen sehr für Ihre Hilfe.

Oliver

InformationsquelleAutor Oliver Chalmers | 2014-11-06

10

Warum sind Sie uisng native Veranstaltung verbindlich zusammen mit jQuery ?

Jedenfalls, wenn Sie wollen, um die Ereignisse behandeln, die nativ können Sie die .bind Methode und übergeben Sie den index von jedem video der Handler
```
var figure = $(".video");
var vid = figure.find("video");

[].forEach.call(figure, function (item,index) {
    item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
    item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});

function hoverVideo(index, e) {
    vid[index].play(); 
}

function hideVideo(index, e) {
    vid[index].pause(); 
}
```
Demo auf http://jsfiddle.net/gaby/0o8tt2z8/2/

Oder Sie gehen voller jQuery
```
var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }
```
Demo auf http://jsfiddle.net/gaby/0o8tt2z8/1/

Vielen Dank Gaby, das ist perfekt.
sind Sie jederzeit herzlich willkommen. (auch aktualisiert, Antwort und entfernt die console.log Befehl, den ich verlassen hatte, und verwendet die variable vid statt suchen für die videos in jedem hover)
Deine Antwort ist wirklich hilfreich. Ich habe den jQuery-Teil der Lösung meiner Frage - stackoverflow.com/questions/53585355/.... Es wäre toll, um Ihre Eingabe, wenn Sie Zeit haben.

InformationsquelleAutor Gabriele Petrioli

Kürzeste version wäre dies eine

<div>
    <video onmouseover="this.play()" onmouseout="this.pause();this.currentTime=0;">
    <source src="yourVideo.ogg" type="video/ogg"></source>
    </video>    
</div>

Diese Weise wäre es ein bisschen sauberer, wenn Sie es wünschen dass.

InformationsquelleAutor Hovhannibang

1

Den hoverVideo() Funktion fordert insbesondere für die erste Instanz von .thevideo, so schwebt über einem spielen das erste video.

Müssen Sie schnappen Sie das element, das das Ereignis aufgetreten ist, dann finden die .thevideo element innerhalb dieses Elements:
```
var figure = $(".video");
var vid = $("video");

[].forEach.call(figure, function (item) {
  item.addEventListener('mouseover', hoverVideo, false);
  item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e) {
  $(this).find('.thevideo')[0].play();
}

function hideVideo(e) {
  $(this).find('.thevideo')[0].pause();
}
```
Hier ist eine aktualisierte fiddle: http://jsfiddle.net/52mxdbgy/1/

Danke Shawn für Ihre schnelle Antwort. Ich weiß, das ist, was passiert ist, daher die Frage, wie gehe ich zum einrichten für jedes video im Gegensatz zu der ersten. Irgendwelche Ideen ? 🙂
siehe aktualisierte Antwort.
Shawn, ich danke Ihnen sehr. Du bist schon eine große Hilfe!
Kein problem, Gaby ' s Antwort war lächerlich besser lol.

InformationsquelleAutor Shawn Erquhart
0

Ihre Funktion ausdrücklich verlangt für das erste video: $('.thevideo')[0].play(); (erstes element im array).

Daher müssen Sie (mindestens) übergeben Sie den index des Videos an die Sie binden die Maßnahmen, um sicherzustellen, das richtige video wird abgespielt und pausiert.

Beispiel:
```
$(document).ready(function() {       
    $('.video').each(function(i, obj) {
        $(this).on("mouseover", function() { hoverVideo(i); });
        $(this).on("mouseout", function() { hideVideo(i); });
    });
});

function hoverVideo(i) {  
    $('.thevideo')[i].play(); 
}

function hideVideo(i) {
    $('.thevideo')[i].pause(); 
}
```
Wo ich die jQuery - .on() Methode, so dass alle Methoden, die jQuery (statt eine Mischung mit JavaScript).

Können Sie dies in Aktion zu sehen in folgendem jsFiddle:

DEMO

Dank Jean-Paul ! Sie haben alle eine große Hilfe gewesen.

InformationsquelleAutor Jean-Paul

Hier das gleiche, ohne jQuery und mit ein bisschen ES6. 😉

for(let tupel of document.querySelectorAll('video')) {
  tupel.addEventListener('mouseover', (e) => {
    e.target.play()
  }, false);

  tupel.addEventListener('mouseout', (e) => {
    e.target.pause()
  }, false);
}

InformationsquelleAutor teawithfruit

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

DEMO