使用javascript悬停播放视频

Question

我正在尝试建立一个html页面，其中显示2个视频，只需悬停旁边的按钮即可播放每个视频。我也希望他们在鼠标移开时停下来。

我已经尝试了一些代码，包括那些在stackoverflow上类似主题中发布的代码，但这只是行不通。

这是我现在的代码：

<div class="video-one">
<video  loop preload="auto" >
<source src="street-copy.mp4" type="video/mp4">
</video>                                    
</div>  

<script > 
var figure = $(".video-one").hover( hoverVideo, hideVideo );

function hoverVideo(e) { $('video', this).get(0).play(); }
function hideVideo(e) { $('video', this).get(0).pause(); }
</script> 

谢谢！

Answer 1

好吧，如果这是您要做的全部，那么我必须问一个小问题。您是否已将jQuery包含到您的项目中？因为此javaScript代码需要jQuery才能起作用：）

我已经用纯JavaScript创建了工作示例：https://codesandbox.io/s/p3mn5yl89j

这是jQuery示例： https://codesandbox.io/s/0m1v552vkv

如有任何疑问，请随时提问。