Video with hover & hide

by daraand

HTML

<!--Video One-->
<video width="960" height="540" controls="0" autoplay loop id="vid1" style="display:none;" poster="http://dev.theoryanimation.com/images/fronts/yolo/teaser-background.jpg">
    <!-- Video's MP4 source-->
    <source src="http://dev.theoryanimation.com/images/fronts/yolo/mov/home.mp4" type="video/mp4" class="img-responsive" id="videomp4" />
    <!-- Video's OGV source-->
    <source src="http://dev.theoryanimation.com/images/fronts/yolo/mov/home.ogv" type="video/ogg" class="img-responsive" id="videoogg" />Your browser does not support the video tag.</video>
<!--Video Two (which is the smae as One)-->
<video width="960" height="540" controls="0" loop id="vid2" style="display:none;">
    <!-- Video's MP4 source-->
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" class="img-responsive" id="videomp4">
        <!-- Video's OGV source-->
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" class="img-responsive" id="videoogg">Your browser does not support the video tag.</video>
<!-- Changers-->
<ul>
    <li>
        <img src="http://placehold.it/100x100" class="thumb" id="thumb1" data-videoid="vid1" />
    </li>
    <li>
        <img src="http://placehold.it/100x100" class="thumb" id="thumb2" data-videoid="vid2" />
    </li>
</ul>

CSS

img {
    cursor:pointer;
}

JavaScript

$('.thumb').hover(function () {
    var currently_playing = $('video:visible');
    if (currently_playing.length) {
        currently_playing.hide();
        currently_playing[0].pause();
    }
    $('#' + $(this).data('videoid')).show()[0].play()
}, function () {
    var currently_playing = $('video:visible');
    if (currently_playing.length) {
        currently_playing.hide();
        currently_playing[0].pause();
    }
    $('#vid1').show()[0].play()
});