事件委托加排他思想完成（仿B站右侧视频鼠标悬停播放，鼠标离开继续播放，鼠标悬停下一个则播放下一个，上一个暂停）

这段HTML代码展示了如何使用`<video>`元素创建一个带有鼠标悬停播放、离开暂停功能的视频列表。每个视频链接到big_buck_bunny.mp4文件，通过JavaScript实现交互控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <ul>
        <video muted="muted" onMouseOver="this.play()" onMouseOut="this.pause()" class="video_class"  >
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  type="video/mp4"></source>
        </video>
  
        <video muted="muted" onMouseOver="this.play()" onMouseOut="this.pause()" class="video_class"  >
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  type="video/mp4"></source>
        </video>

        <video muted="muted" onMouseOver="this.play()" onMouseOut="this.pause()" class="video_class"  >
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  type="video/mp4"></source>
        </video>

        <video muted="muted" onMouseOver="this.play()" onMouseOut="this.pause()" class="video_class"  >
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  type="video/mp4"></source>
        </video>

        <video muted="muted" onMouseOver="this.play()" onMouseOut="this.pause()" class="video_class"  >
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"  type="video/mp4"></source>
        </video>
      </ul>
    
</body>
</html>
<style>
</style>
<script>

  var lis = document.querySelector('ul').querySelectorAll('video')
    console.log(lis[0].play);
    console.log(lis[0].pause);
    for(var i=0;i<lis.length;i++){
      lis[i].onmouseover = function(){
        for(var i = 0;i<lis.length;i++){
          lis[i].pause()
        }
        this.play()
      }
      lis[i].onmouseout = function(){  //鼠标离开颜色恢复
        lis[i].pause()
      }
    }
</script>