html中有多个video如何实现鼠标划过重新加载？

大家都知道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');
	
});

上面写到鼠标经过时播放，鼠标离开时重新加载与暂停。通过上述代码就能实现这个效果。