javascript - 如何为在 'mouseover' 上播放()视频的页面上的每个视频添加叠加按钮？

Question

上下文:

• 该页面有多个视频
• 鼠标悬停时可预览页面上的每个视频(完成)
• 当鼠标悬停在视频上时，每个视频都会出现叠加按钮(完成)
• 当鼠标悬停在叠加按钮上时，视频预览继续播放(或重新启动)--> 无法弄清楚这一点

我GetElementsByClassName，保存到变量中，然后循环浏览页面上的所有视频，并使用适当的play()/pause()添加EventListeners> 功能 -> 对于“鼠标悬停”视频预览效果很好。

当我将鼠标悬停在按钮上时，视频就会停止，并且我收到“Uncaught TypeError: e.target.play is not a function at HTMLDivElement.videoPlay”我的控制台出现错误。

当我在控制台中进行测试时，我可以使用以下适当的索引播放每个视频:buttons[0].nextElementSibling.play()

但由于某种原因，我无法让它在函数中工作。

关于如何使其发挥作用有什么想法吗？

HTML

    <div>
        <!-- Video segment -->
        <div class="vid-segment">
            <a class="vid-btn" href="#">
                <i class="fa fa-shopping-cart"></i> 
                <span>Add to cart</span>
            </a>
            <video class="video-preview" witdh="352" height="198" muted>
                <source src="static/videos/video1.mov" type="video/mp4">
            </video>
        </div>
        <!-- Video segment end -->

        <!-- Video segment -->
        <div class="vid-segment">
            <a class="vid-btn" href="#">
                <i class="fa fa-shopping-cart"></i> 
                <span>Add to cart</span>
            </a>
            <video class="video-preview" witdh="352" height="198" muted>
                <source src="static/videos/video1.mov" type="video/mp4">
            </video>
        </div>
        <!-- Video segment end -->    

JavaScript

function videoPlay() {
    loop = true;
    play()
    console.log("Video plays")
}


function videoStop() {
    currentTime = 0;
    pause()
    console.log("Video stops")
}


const videos = document.getElementsByClassName('.vid-segment')
const buttons = document.getElementsByClassName('.vid-btn')

for(var i = 0; i < videos.length; i++)   {
    videos[i].addEventListener('mouseover', videoPlay);
    videos[i].addEventListener('mouseout', videoStop);
    buttons[i].addEventListener('mouseover', function() {
        buttons[i].nextElementSibling.play()
    })  

}         

Answer 1

我明白了!答案如下:

const videos = document.querySelectorAll('.video-preview')
const buttons = document.querySelectorAll('.vid-btn')

for (let i = 0; i < videos.length; i++) {
    videos[i].addEventListener('mouseover', function() {
      console.log('play')
      videos[i].play()
    })
    videos[i].addEventListener('mouseout', function() {
      console.log('pause')
      videos[i].pause()
      videos[i].currentTime = 0;
    })
    buttons[i].addEventListener('mouseover', function() {
        console.log('button hover')
        videos[i].play();
    })
    buttons[i].addEventListener('mouseout', function() {
        console.log('button hover')
        videos[i].pause()
        videos[i].currentTime = 0;
    })
  }