原教程：https://www.bilibili.com/video/BV1iK4y1s7Db?spm_id_from=333.999.0.0&vd_source=36b18f2d7c5333a81747c014397b7f36

这次我通过更改代码vue js当鼠标移动到页面时，播放视频。在这里，我将图片改为视频，这里可以使用 gif 等实现，这里看起来很丑，用图片更好看，有些bug暂停后需要显示封面等也没有调整。演示地址:http://150.158.10.192/web

<template>   <div class="box">     <ul class="box_ul">       <li v-for="(p,index) in paths" :key="index">         <video :id="'video-' index" muted="muted"                x5-video-orientation="portraint"                :poster="require('@/assets/video/' p.poster)"                @mouseover="play(index)"                @mouseleave="stop(index)"                :src="require('@/assets/video/' p.video)"></video>         <!--<img :src="require('@/assets/imgs/index/' p.img)">-->         <div class="text">{ 
        { 
         p.desc }}</div>       </li>     </ul>   </div>  </template>  <script> export default { 
           name: 'Index',   data() { 
         return { 
          paths: [ { 
          path: "/shuffling", desc: '会发光的Button', video: '发光的Button.mp4', poster: '发光的button封面.png' }, { 
          path: "/button", desc: '会发光的Button', video: '发光的Button.mp4', poster: '发光的button封面.png' }, { 
          path: "/button", desc: '会发光的Button', video: '发光的Button.mp4', poster: '发光的button封面.png' }, { 
          path: "/button", desc: '会发光的Button', video: '发光的Button.mp4', poster: '发光的button封面.png' }, { 
          path: "/button", desc: '会发光的Button', video: '发光的Button.mp4', poster: '发光的button封面.png' } ] } }, methods: { 
          play(index) { 
          let media = document.getElementById("video-"+index) if (media) { 
          //开始播放 media.play() } }, stop(index) { 
          let media = document.getElementById("video-"+index) if (media) { 
          //暂停播放，将实现设置从头开始 media.pause() media.currentTime = 0 } } } } </script> <style> body { 
          background-color: #453a94; height: 100vh; width: 100%; } li { 
          list-style: none; } .box_ul { 
          width: 1000px; height: 320px; margin: 200px auto; overflow: hidden; transition: all .3s; } .box_ul li { 
          float: left; height: 320px; width: 200px; position: relative; transition: all .3s; } /*设置字体的位置以及样式*/ .box_ul li .text { 
          position: absolute; /*使用绝对定位，找到最近的父级也就是 li*/ left: 0; bottom: 0; font-size: 10px; color: #ffffff; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: rgba(0,0,0,.3); /*可以是背景颜色编程渐变趋向于透明*/ } .box_ul:hover li { 
          width: 90px; /*设置90px，因为box整体为1000px，移到li上变成640px，剩余360px，其他4张图平均下来就为90px，否则最后一张图的显示会有问题*/ } /*移动到 li上时，将其变为640px*/ .box_ul li:hover { 
          width: 640px; } </style>