刷新页面时悬停时无法播放 HTML 视频

Question

基本上，我有一个页面，其中我包含了一些视频， 这样当我将鼠标悬停在任何视频上时，它应该播放，当我从视频中鼠标退出时，它应该停止。 当我第一次访问该页面或进行硬刷新时，一切正常。 但是当我通过刷新再次重新加载同一页面或在浏览器中再次点击页面 url 时， 悬停时无法播放视频。而且当我在重新加载页面后单击视频之外的其他地方的鼠标按钮时，然后再次将鼠标悬停在视频上工作。

这是我正在使用的代码：-

<div  class="vid" >
<video width="100%" height="100%" class="thevideo" >
<source src="some path" >
</video>
</div>
<script type="text/javascript">
var figure = $(".vid").hover( hoverVideo, hideVideo);
function hoverVideo(e) { $('.thevideo', this).get(0).play();  
}
function hideVideo(e) {
$('.thevideo', this).get(0).pause();
$('.thevideo', this).get(0).currentTime=0;
}
</script>

Answer 1

尝试像这样将代码包装在$(document).ready()中

$(document).ready(function(){
var figure = $(".vid").hover( hoverVideo, hideVideo);
function hoverVideo(e) { $('.thevideo', this).get(0).play();  
}
function hideVideo(e) {
$('.thevideo', this).get(0).pause();
$('.thevideo', this).get(0).currentTime=0;
}
})