大家都知道video是Html5的屬性,其中有兩個屬性是播放play與暫停pause。我們最近的項目濟南美思慕整形美容醫院就用到了video屬性。但其中用到了一個重新加載的屬性load。實現的效果是鼠標經過小視頻重新加載,離開暫停。
![]()
function showVideo(){
var vn = Math.floor(Math.random()*20+1);
$(".casev").css("opacity",0);
$(".case"+vn+"v").css("opacity",1);
}
var tv = null;
$(".casev").mouseover(function(){
var cIndex = $(".casev").index(this);
$(".casev").css("opacity",0);
$(".case"+(cIndex+1)+"v").css("opacity",1);
$(".case"+(cIndex+1)+"v video")[0].play();
clearInterval(tv);
}).mouseout(function(){
var cIndex = $(".casev").index(this);
$(".case"+(cIndex+1)+"v video")[0].load();
$(".case"+(cIndex+1)+"v video")[0].pause();
clearInterval(tv);
console.log('stop');
});上面寫到鼠標經過時播放,鼠標離開時重新加載與暫停。通過上述代碼就能實現這個效果。



