html - 悬停时播放视频消失，但在我检查页面时重新出现

Question

当用户用鼠标浏览视频时，我正在尝试播放视频。我正在使用下面的代码这样做：

<video poster="img/video1.jpg" src="video/movie.mp4" id="id0" onMouseOver="id0.play()" onMouseOut="id0.pause()" onclick="window.location='video/movie.mp4';id0.pause()" loop ></video>

所以它会显示横幅/海报，但是当我将鼠标悬停在它上面时，它就会消失。然后，当我用 chrome 检查代码时，它会在我检查后立即显示，如果我浏览它就可以工作。有人有任何提示、技巧或绝妙的想法吗？

Answer 1

似乎让 onMouseOver 触发播放没有正确导致元素重新绘制（视频实际上正在播放，我可以听到我的样本！）

您可以通过修改 onMouseOver 以强制控件出现然后消失（通常太快看不到）来解决它：

...onMouseOver="id0.play();id0.controls=true;id0.controls=false"...

经过测试，似乎在 OSX 上的 Safari 和 Chrome 中都可以正常工作