使用 javascript 悬停播放视频

Question

我正在尝试设置 un html 页面，显示 2 个视频，每个视频都可以通过将鼠标悬停在旁边的按钮来播放。我还希望他们在鼠标退出时暂停。

我已经尝试了几个代码，包括那些在堆栈溢出上发布的类似主题的代码，但它不起作用。

这是我现在的代码：

<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

如果您有任何问题，请随时提问。