悬停播放精选视频

我需要一个选项来让我的wordpress页面在悬停时以及鼠标离开容器时停止播放视频时播放精选视频(就像精选图片一样)。

在此链接上类似的内容, 不仅不是在文本悬停上, 而是在视频容器悬停上。

`http://jsfiddle.net/pNbYq/4/`

我需要播放没有声音的视频选项。这样, 你会在右上边缘有一个小图标来激活声音。

对我而言, 最好的解决方案是, 如果有人可以在www.vine.co上做出类似的决定, 那么该播放器就是完美的。

我想在我的网站上有相同的选择。

我希望有人能帮助我。干杯:)

#1

尝试这个。 http://jsfiddle.net/pNbYq/146/

<div id="video-holder">
    <div id="video1-container">
        <video id="video1" muted>
            <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
        </video>
        <div class="volume-controller" id="audio-ctrl"> <i class="fa fa-volume-up" id="volume-on"></i>
 <i class="fa fa-volume-off" id="volume-off"></i>

        </div>
    </div>
    <video id="video2">
        <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    </video>
    <video id="video3">
        <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    </video>
</div>
<div id="button-holder">    <a data-video="video1">Video 1</a>
    <a data-video="video2">Video 2</a>
    <a data-video="video3">Video 3</a>

</div>

$('#audio-ctrl').click(function () {
    var sound = $('#video1').prop('muted');
    if (sound) {
        $('#video1').prop('muted', false);
        $('#volume-off').hide();
        $('#volume-on').show();
    } else {
        $('#video1').prop('muted', true);
        $('#volume-on').hide();
        $('#volume-off').show();
    }
});

$('#video1-container').on('mouseover', function () {
    $('#video1').get(0).play();
});
$('#video1-container').on('mouseout', function () {
    $('#video1').get(0).pause();
});

#video2, #video3 {
    display:none;
}
a:hover {
    cursor:pointer;
}
.volume-controller {
    width: 24px;
    height: 24px;
    position: absolute;
    color: #fff;
    top: 10px;
    left: 10px;
}
#volume-on {
    display: none;
}