• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mouseover event -> Video abspielen

S

SkipToPlay

Neues Mitglied
Hallo,

Ich steige grade neu in der Webprogrammierung ein und habe mir schonmal die grundlegenden Kenntnisse angeeignet was Html, Css und Php angeht.
Aber was Javascript angeht habe ich bis jetzt keine Erfahrung gemacht, demnoch habe ich die Grundlagen von Java.

Nun zu meiner Frage:
Ich würde gerne auf meiner Website die ich grade nach und nach aufbaue eine Funktion einbauen, welche bezweckt das wenn sich die Maus über ein Bild befindet, in einem kleinen "Fenster" ein kurzes Vorschau-Video abgespielt wird, dieses Video sollte sich optimalerweise immer wiederholen solang sich die Maus über dieses Objekt befindet.

Ich habe ein Beispiel gefunden:
http://www.videocopilot.net/tutorials/
Wenn man dort mit der Maus über das Bild geht, passiert genau das was ich beschrieben habe.

Ich würde mich sehr über ein paar Denkanstöße oder einem Codeschnipsel freuen!

vielen Dank!

M.f.G.
SkipToPlay
 
Werbung:
Hm gut, also was ich vorschlagen würde und was ich auch als sinnvoll erachte ist, dass wenn du dich eh etwas damit beschäftigen möchtest, ist Codeacademy http://www.codecademy.com/de/learn dort gibt es geführte Tutorials zu vielen Themen (eben auch JavaScript (und jQuery). Übrigens hat Java bis auf den Namen auch nicht viel gemein mit JavaScript.

Je nach dem wie du vorgehen möchtest könntest du direkt das HTML5 video-tag nutzen welches auch eine autoplay-Eigenschaft besitzt:
http://www.w3schools.com/tags/av_prop_autoplay.asp

Also was dir auf jeden Fall helfen wird bei solchen Sachen ist jQuery, eine JavaScript Bibliothek, die dir viele Dinge vereinfacht im Umgang mit JavaScript, wobei es schon gut ist ein paar JS Grundlagen zu können bevor man damit anfängt :)

Hoffe das hilft dir schon mal :]
 
Ich habe so etwas bisher zwar noch nicht gemacht, würde es aber folgendermaßen angehen:

- Für das "Fenster" könnte man entweder ein JS Plugin einbinden, welches ein Modal bereitstellt, oder das auch selber schreiben. Dazu erzeugt man mit JavaScript ein Blockelement (Div), fügt es ins DOM ein und positioniert es per CSS absolut vom entsprechenden Bild.
- In das "Fensterelement" kommt ein HTML5 Videotag mit den Attributen autoplay, loop und einem beliebigen Video zu Testzwecken.
- Anschließend wird das aufpoppen des Fensters an ein Mouse-Event gebunden.

Ich bin mir jetzt mangels Erfahrung nicht sicher, ob das autoplay auch bei nachträglich ins DOM eingefügten Elementen funktioniert. Wenn nicht, müsste man googeln. Stackoverflow kennt nahezu immer eine Lösung. Falls doch, geht man zum letzten Schritt über und dynamisiert die Videoquelle. Dazu würde es sich anbieten, den Namen des Bildes mit dem Videonamen korrespondieren zu lassen, also bsw. video_1.png zu video_1.ogg und video_1.mp4. Die JS Funktion sieht dann so aus, dass beim Hovern das source-Attribut des Image-tags ausgelesen wird, daraus der Substring video_1 extrahiert, dieser zu video_1.ogg und video_1.mp4 zusammengebaut und das Ganze dann dem source-Attribut des Videotags zugewiesen wird.

Was du dazu können musst, ist das Erstellen von HTML-Elementen sowie deren Hinzufügen und Löschen aus dem DOM per JavaScript und natürlich allgemeine Stringfunktionen. Ich würde dir auch jQuery empfehlen, das vereinfacht die Aufgabe wesentlich.
 
Zuletzt bearbeitet:
Werbung:
Ich habe mir das mal interessehalber angesehen, und da es wirklich nicht viel ist um das umzusetzen, poste ich das einfach mal wie ich es gelöst habe.

Das HTML:
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML5 Video autoplay</title>
        <script src="./js/jquery-1.11.0.min.js"></script>
        <script src="./js/autoplay.js"></script>
    </head>
 
    <body>
        <a href="#" id="btn-video"><img src="./media/img/mp4_video.jpg" alt="mp4-video" /></a>     
    </body>
 
</html>

Um deinem Beispiel nah zu kommen, habe ich bei mir einfach einen Link mit einem Bild als Button für das Video genommen.
In meinem JavaScript füge ich dann einfach nach diesem Link das Video ein.
Es ist nicht viel was man tun muss, es kommt dann eher auf die Art und Weise an, wo du das Video dann haben möchtest.

autoplay.js:
Code: 
(function($, window, document) {
    $(function() {
        // Link-Button mit Bild
        var btn_video = $('#btn-video');
        // Einzufügendes DIV mit Video-Tag und verschiedenen Quell-Dateien
        // Controls = Play/Pause etc. | autoplay = autoplay :]
        var video_box = '<div class="video-box"><video autoplay controls><source src="./media/video/mars_rover_curiosity.mp4" type="video/mp4"><source src="./media/video/mars_rover_curiosity.ogv" type="video/ogg">Dein Browser kann kein HTML5-Video :/.</video></div>';   

        // Event-Listener auf unseren Link-Button legen
        btn_video.on({
            // Beim zeigen auf den Button
            "mouseenter": function() {
                // Vom aktuellen Button ausgehend das Video als nächstes Element einfügen
                $(this).after(video_box);             
            },

            // Beim verlassen des Buttons
            "mouseleave": function() {           
               // Klasse video-box entfernen, später besser ID nehmen
               $('.video-box').remove();            
            }
         
            // PS: Hover gibt es ab jQuery 1.9 nicht mehr.
        })

    });
}(window.jQuery, window, document));

Edit: keine Ahnung wie das mit den Codecs ist, aber Chrome und Firefox konnten beide die mp4-Datei abspielen, als zweite Quelle habe ich einfach noch ein ogv-Video hinterlegt.
 
Zuletzt bearbeitet:
Chronos schrieb:
Ich habe mir das mal interessehalber angesehen, und das es wirklich nicht viel ist um das umzusetzen, poste ich das einfach mal wie ich es gelöst habe.

Das HTML:
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML5 Video autoplay</title>
        <script src="./js/jquery-1.11.0.min.js"></script>
        <script src="./js/autoplay.js"></script>
    </head>
 
    <body>
        <a href="#" id="btn-video"><img src="./media/img/mp4_video.jpg" alt="mp4-video" /></a>     
    </body>
 
</html>

Um deinem Beispiel nah zu kommen, habe ich bei mir einfach einen Link mit einem Bild als Button für das Video genommen.
In meinem JavaScript füge ich dann einfach nach diesem Link das Video ein.
Es ist nicht viel was man tun muss, es kommt dann eher auf die Art und Weise an, wo du das Video dann haben möchtest.

autoplay.js:
Code: 
(function($, window, document) {
    $(function() {
        // Link-Button mit Bild
        var btn_video = $('#btn-video');
        // Einzufügendes DIV mit Video-Tag und verschiedenen Quell-Dateien
        // Controls = Play/Pause etc. | autoplay = autoplay :]
        var video_box = '<div class="video-box"><video autoplay controls><source src="./media/video/mars_rover_curiosity.mp4" type="video/mp4"><source src="./media/video/mars_rover_curiosity.ogv" type="video/ogg">Dein Browser kann kein HTML5-Video :/.</video></div>';   

        // Event-Listener auf unseren Link-Button legen
        btn_video.on({
            // Beim zeigen auf den Button
            "mouseenter": function() {
                // Vom aktuellen Button ausgehend das Video als nächstes Element einfügen
                $(this).after(video_box);             
            },

            // Beim verlassen des Buttons
            "mouseleave": function() {           
               // Klasse video-box entfernen, später besser ID nehmen
               $('.video-box').remove();            
            }
         
            // PS: Hover gibt es ab jQuery 1.9 nicht mehr.
        })

    });
}(window.jQuery, window, document));

Edit: keine Ahnung wie das mit den Codecs ist, aber Chrome und Firefox konnten beide die mp4-Datei abspielen, als zweite Quelle habe ich einfach noch ein ogv-Video hinterlegt.
Zum Vergrößern anklicken....

Firefox kann mp4-Dateien nur in den neuesten Versionen und nur unter Windows abspielen.
Wenn du dem <video> noch das loop Attribut hinzufügst, wiederholt es sich automatisch.
 
Hallo,

vielen Dank an alle!
das hilft mir sehr weiter :)

Was mir aufjeden fall klar wird das ich mal etwas Javascript lernen sollte, was jetzt kein großes Problem sein sollte da ich schon sein Jahren Programmiere.
Um dies zu Testen habe ich jetzt grade keine Zeit, ich wollte mich erstmal bedanken.
Ich werde diesen Post wohlmöglich nachdem ich das getestet habe editieren oder ggf. wenn weitere Kommentare kommen neu Posten.

M.f.G.
SkipToPlay
 
Werbung:
Chronos schrieb:
Ich habe mir das mal interessehalber angesehen, und das es wirklich nicht viel ist um das umzusetzen, poste ich das einfach mal wie ich es gelöst habe.
Zum Vergrößern anklicken....

So in etwa hatte ich mir es auch vorgestellt. Wobei die Videoquelle dann noch dynamisiert werden muss, also so etwas wie:
Code: 
var myVideo = $(this).attr('alt');
.....
'<source src="pfad/zum/video/"' + myVideo + '.mp4" type="video/mp4">'
 
Zuletzt bearbeitet:
Hallo,

Das Script funktioniert soweit ganz gut,
Hier könnt ihr es direkt testen fals gewünscht: http://www.skiptoplay.de/ (78 Mb - Video, hatte ich von´m Freund rumliegen)
Natürlich wird in der Praxis ein kleineres Video in "schlechterer" Qualität gezeigt, um den Traffic so klein wie möglich zu halten.
Aber demnoch frag ich mich, währ ein Flash-Objekt nicht besser? (nur mal so nebenbei gefragt)
Leider habe ich ein paar Probleme dieses Script so anzupassen das es auf verschiedene Videos bzw. Objekten funktioniert.

Ich werde wenn ich Zeit finde Javascript lernen, aus dem grund das ich mich überhaupt mehr in dem bereich Web beschäftigen möchte,
weswegen ich sehr Dankbar währ wenn jemand dies für mich machen könnte.
Mehr als das was @Tronjer gepostet hat wird ja nicht benötigt, aber irgendwas mach ich falsch beim einbauen dieser dynamisierung.

Vielen dank nochmal für eure bisherigen Hilfe ;)
 
SkipToPlay schrieb:
Hallo,

Ich werde wenn ich Zeit finde Javascript lernen, aus dem grund das ich mich überhaupt mehr in dem bereich Web beschäftigen möchte,
weswegen ich sehr Dankbar währ wenn jemand dies für mich machen könnte.
Mehr als das was @Tronjer gepostet hat wird ja nicht benötigt, aber irgendwas mach ich falsch beim einbauen dieser dynamisierung.
Vielen dank nochmal für eure bisherigen Hilfe ;)
Zum Vergrößern anklicken....

Wir schreiben dir aber nicht die ganze Seite ;)

Pass auf, also du brauchst etwas was deine Buttons eindeutig identifiziert und auf den Namen des Videos schließen lässt. Dazu kannst du wie Tronjer schon geschrieben hat ".attr" nutzen um nach Elementen zu suchen die dem übergebenen Wert entsprechen und dessen Inhalt zurückliefern, er hat dafür "alt" genommen - etwas passender finde ich, wobei es egal ist ein "data-"-Attribut zu nehmen. Die data-Attribute kannst du nennen wie du willst. Um dem ganzen mehr Sematik zu geben nennen wir unseres einfach mal "data-video-name", dann weiß man auch gleich um was es geht. Man könnte es auch "data-kartoffel" nennen.

Viel hat sich zu meinem letzten Beispiel im HTML nicht geändert, die Buttons haben jetzt keine ID mehr sondern beide ein und dieselbe Klasse.
HTML: 
<a href="#" class="btn-video" data-video-name="curiosity" ><img src="./video.jpg" alt="curiosity" /></a>
<a href="#" class="btn-video" data-video-name="maru" ><img src="./video.jpg" alt="maru" /></a>

Hier auch wieder unser "data-video-name".
Die Videos in meinem Stammverzeichnis heißen "maru.ogv/mp4" & "curiosity.ogv/mp4".

Jetzt zum JavaScript, alle Änderungen stehen als Kommentar vermerkt drinn, im Grunde braucht man nur eine Funktion die "data-video-name" ausliest.

Code: 
(function($, window, document) {
    $(function() {
        // Selektor ist nun eine Klasse, daher der Punkt
        var btn_video = $('.btn-video');

        var video_name;
        var video_box;
       /*
        * Funktion liest den Wert des Attributes 'data-video-name'
        * eines übergebenen Elements und setzt den entsprechenden Pfad.
        *
        * @param    video_element
        * @return   video_box
        */    
        function loadVideo(video_element) {
            var name = $(video_element).attr('data-video-name');
            video_box = '<div class="video-box"><video autoplay loop controls><source src="./' + name + '.mp4" type="video/mp4"><source src="./' + name + '.ogv" type="video/ogg">Dein Browser kann kein HTML5-Video :/.</video></div>';
        
            return video_box;
        }

        btn_video.on({
            "mouseenter": function() {           
                $(this).after(loadVideo($(this)));              
            },
            "mouseleave": function() {      
               $('.video-box').remove();        
            }
  
        })
    });
}(window.jQuery, window, document));

Edit: loop.
 
Werbung:
@Chronos tausend Dank!

Dies ist genau das was ich haben wollte!
Wenn ich meine Erfahrungen gestärkt habe, werde ich auch hoffen das ich
den ein und anderen helfen kann.
Denn die Web-Programmierung ist die Sprache(n) die am meisten Spaß macht.

Nochmal vielen dank! - an alle
 
Heyho, ich bin schon lange auf der Suche nach so einer Funktion gesucht
und hab es nie wirklich geschafft so eine zu programmieren.

Habe jetzt euer Skript als Grundlage genommen, da ich ungefähr dasselbe vor habe nur nicht mit einem Video, sondern,
dass wenn man über einen Text fährt, das dazugehörige Bild an der Maus angeheftet angezeigt wird, solange man sich mit dem Zeiger über dem Text befindet.

Leider hab ich bis jetzt noch nicht wirklich das hinbekommen und würde mich über eine Lösung (wenn Ihr dazu lust habt natürlich :D )

Beste Grüße
 
Google mal nach jQuery Tooltip mouse follow, dann findest Du solche Skripts. Ich hatte selber mal eins, kann es aber nicht mehr finden. Es war sowieso nicht so gut, weil es die Browserabhängigkeiten berücksichtigen muss. Mit jQuery geht es sicher einfacher.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Da steht zwar "only text" aber wenn ich mir den Code ansehe, müsste es eigentlich funktionieren, wenn Du ein img-Tag verwendest. Also nicht einfach den Dateinamen sondern
Code: 
title="<img src='img.png'">
Und genau auf die Hochkommas achten!
Sauberer wäre es allerdings, eine data-Tag zu verwenden, also so:
Code: 
data-tt="img.png">
und im Skript:
Code: 
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var im = $(this).attr('data-tt'); // geaendert
$('<p class="tooltip"><img src=" + im + "></p>') // geaendert
// $(this).data('tipText', title).removeAttr('title');  loeschen
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
// $(this).attr('title', $(this).data('tipText')); loeschen
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
</script>
 
Zuletzt bearbeitet von einem Moderator:
Hm, leider wird dann nur < img src='img. png' eingeblendet^^
<
p class="masterTooltip" title="<img src='http://img.png' "
>">

// Habe ein "> auch schon mal weg gelassen hat aber nichts gebracht :D

Mouse over the heading text above to view it's tooltip.
<
/p
>
 
Werbung:
Nein, da war die schließende Klammer an der falschen Position. So ist es richtig:
Code: 
title="<img src='img.png'>"
Und lies mal, was ich oben noch hinzugefügt habe.
 
Ya habs jetzt auch gesehen, vielen Dank! :)

glaube das müsste jetzt eig. passen nur zeigt der mir ein zerrissenes bild an wenn ich jetzt drüber fahre, ich schau noch mal ob ich alles richtig eingebunden hab :)
 
Vielen Danke es hat geklappt, du bist der Beste!! :D

Und wenn ich jetzt z.B. mehrere Texte habe:

Hey

Na du

Was geht

wie kann man dann jeweils verschiedene Bilder einfügen, muss ich dazu dann jeweils eine eigene klasse schreiben?
 
Werbung:
Nein, Du brauchst keine eigenen Klassen, sondern Du kannst ja in jedem Element, wo Du das title-Tag einfügst, ein anderes Bild verwenden. Also immer dieselbe Klasse, aber jeweils ein anderes title-Attribut.
Ich habe übrigens die erste Variante ausprobiert und musste
Code: 
.text(title)
in
Code: 
.html(title)
ändern (benutze Firefox). Solltest Du auch tun, sonst funktioniert es u. U. nicht in allen Browsern.
 
Ehm ich habe das title-tag jetzt durch das data-tt ersetzt und mein code sieht jetzt so aus, aber leider wird kein bild angezeigt^^

<a href="#" data-tt="http://img1.png" class="masterTooltip">Your Text</a>

<a href="#" data-tt2="http://img2.png" class="masterTooltip">Your Text</a>

<p data-tt3="http://img3.png" class="masterTooltip">Mouse over the heading text above to view it's tooltip.</p>

<p data-tt4="http://img4.png" class="masterTooltip">Mouse over the heading text above to view it's tooltip.</p>


<style type="text/css">

.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}

</style>


<br /><br />


<script type="text/javascript">
$(document).ready(function() {

$('.masterTooltip').hover(function(){

var im = $(this).attr('data-tt');
var im = $(this).attr('data-tt2');
var im = $(this).attr('data-tt3');
var im = $(this).attr('data-tt4');

$('<p class="tooltip"><img src=" + im + "></p>')

.appendTo('body')
.fadeIn('slow');
}, function() {


$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
</script>

Weiß nicht ganz genau wie du das gemeint hast^^ Also ich habs eben mit Klassen probiert und das hat eigentlich ganz gut geklappt, außer dass das Bild auch eingezeigt wurde wenn man in der gleich zeile war, aber schon über den Text hinten hinaus^^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben