我需要一个选项,让我的wordpress页面在悬停时播放精选视频(就像特色图片一样),当鼠标离开容器时停止播放视频。
此链接上的内容,不是文字悬停,而是视频容器悬停。
`http://jsfiddle.net/pNbYq/4/`
我需要制作没有声音选项的视频播放。这样你在右上边缘有一个小图标可以激活声音。
对我来说最好的解决方案是,如果有人可以在www.vine.co上制作类似玩家就是完美的东西。
我想在我的网站上使用相同的选项。
我希望有人可以帮助我。干杯:)
答案 0 :(得分:0)
试试这个。 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;
}