在 React 中使用 JS 在 mouseOver 上播放视频 [重复]答案

【问题标题】：Play video on mouseOver using JS in React [duplicate]在 React 中使用 JS 在 mouseOver 上播放视频 [重复]
【发布时间】：2024-01-05 15:03:01
【问题描述】：

只是想让这些视频在鼠标悬停时播放。我可以从控制台看到我需要创建一个函数而不是使用字符串（其他 SO 答案使用字符串），那么如何在不创建太多额外代码的情况下做到这一点？理想情况下，我希望在 onMouseOver 和 onMouseOut 属性上设置正确的功能。

        <video 
          poster="https://i.imgur.com/Us5ckqm.jpg"
          onMouseOver="this.play()" 
          onMouseOut="this.pause();this.currentTime=0;"
          src={`${vid.videos.tiny.url}#t=1`}
        </video>

也试过

        <video 
          poster="https://i.imgur.com/Us5ckqm.jpg"
          onMouseOver={() => this.play()}
          onMouseOut={() => this.pause()}
          src={`${vid.videos.tiny.url}#t=1`} >
        </video>

这给了我错误：无法读取未定义的属性“播放”。

编辑不确定这是否相关，但上面的代码位于 map 函数中，它也是 get 请求的一部分。这是完整的功能：

  const fetchVideos = async (amount, category) => {
    const response = await axios.get('https://pixabay.com/api/videos/', {
      params: {
        key: '123456123456123456',
        per_page: amount,
        category: category
      }
    })
    console.log(response)
    const vidsAsHtml = response.data.hits.map(vid => {
      return (
        <div className={`${props.page}--grid-content-wrapper`} key={vid.picture_id}>
          <div className={`${props.page}--grid-video`}>
            <video className=".video"
              poster="https://i.imgur.com/Us5ckqm.jpg"
              onMouseOver={() => this.play()}
              onMouseOut={() => this.pause()}
              src={`${vid.videos.tiny.url}#t=1`} >
            </video>
          </div>
          <div className={`${props.page}--grid-avatar-placeholder`}></div>
          <div className={`${props.page}--grid-title`}>{vid.tags}</div>
          <div className={`${props.page}--grid-author`}>{vid.user}</div>
          <div className={`${props.page}--grid-views`}>{abbreviateNumbersOver999(vid.views)} 
            <span className={`${props.page}--grid-date`}> • 6 days ago</span>
          </div>
        </div>
      )
  })
  setResource(vidsAsHtml)
}

编辑 2： 好像其他人有 problem with the 'this' keyword inside of mapping statement。尽管我尝试了这些解决方案，但“this”仍未定义。

【问题讨论】：

这是您的实际代码吗？因为如果是，您应该将一个函数传递给 onMouseOver 和 onMouseOut。 onMouseOver={() => this.play()}onMouseOut={() => this.pause(); this.currentTime=0}
已经试过了——给我控制台错误无法读取未定义的属性“播放”
关闭它作为你的另一个问题的重复（因为它是关于同样的问题）。

标签： javascript html reactjs ecmascript-6 this

【解决方案1】：

一位名叫Felix Kling的用户给出了一个非常简单的答案，解决了我在this post中的问题：

事件处理程序道具应该被传递给一个函数。现在您正在尝试传递 this.play() 的返回值和 this.pause() 作为事件处理程序，无论如何都不起作用。

React 也不会通过 this，但你可以通过event.target访问它：
<video
  poster="https://i.imgur.com/Us5ckqm.jpg"
  onMouseOver={event => event.target.play()}
  onMouseOut={event => event.target.pause()}
  src={`${vid.videos.tiny.url}#t=1`} >
</video>

找到有效的解决方案here.

【讨论】：

简单而强大！好一个
哇，至少它帮助我实现了大约 90% 的要求

【解决方案2】：

一些快速的谷歌搜索，我找到了this

var figure = $(".video").hover( hoverVideo, hideVideo );
function hoverVideo(element) { 
$('video', this).get(0).play(); 
}
function hideVideo(e) {
$('video', this).get(0).pause(); 
}

然而，这是 jquery，因此您必须在 html 中包含该库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

【讨论】：