悬停播放精选视频 _WordPress主题

我需要一个选项来让我的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://img.readke.com/220603/232A950Q-0.jpg" 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://img.readke.com/220603/232A950Q-0.jpg" type="video/ogg"> < /video> < video id="video3"> < source src="http://img.readke.com/220603/232A950Q-0.jpg" 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; }