如何实现同个页面移入不同的视频播放,移出暂停

Question

      <!--video视频标签，给上宽高-->
     <video id="video" onmouseover="videoPlayback()" onmouseout="videoStopped()" width="340px" height="190px">
         <!--视频类型为视频和视频路径-->
         <source type="audio/mp4" src="video/10s.mp4"></source>
     </video>
     
 </body>
 
<script>
     //鼠标移进去
     function videoPlayback(){
         //获取视频标签
         var video = document.getElementById('video'); 
         //给视频标签添加缓存播放---video标签属性。
         video.setAttribute("autoplay","autoplay")
         //给视频标签添加循环播放---video标签属性。
         video.setAttribute("loop","loop")
         //播放视频
         video.play();
     }
     
     //鼠标离开
     function videoStopped(){
         //获取视频标签
         var oDiv = document.getElementById('video'); 
         //停止播放
         video.pause();
     }
 </script>

因为页面好几个视频,总不能每个视频链接加上id吧?

Answer 1

onmouseover="videoPlayback(this)" 然后从参数中直接拿到作用元素

function videoPlayback(video){
         //给视频标签添加缓存播放---video标签属性。
         video.setAttribute("autoplay","autoplay")
         //给视频标签添加循环播放---video标签属性。
         video.setAttribute("loop","loop")
         //播放视频
         video.play();
     }

菜鸟教程上也有例子，https://www.runoob.com/try/tr...