在悬停时播放视频会消失，但在我检查页面时会重新显示

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中似乎都可以正常工作