Question

我有一个电影作品集，我想在首页的视频中显示一些内容，而不是静态图像。为此，借助插件Featured Video Plus，我将一些精选图片更改为视频。我可以使用它，但是我可以让视频在加载时自动播放，但希望更改此设置，以便在鼠标悬停时播放。

这是我正在使用的代码：

window.onload=function(){
var video = document.getElementByClassName('wp-video-shortcode')
viewport.addEventListener('mouseover', function() { video.play() }, false);
viewport.addEventListener('mouseout', function() { video.pause() }, false);
}

我要使其正常运行的网站是www.nordenson.nu

我要实现的最终功能是，图像链接到每个投资组合项目的单个页面项目，并且视频仅在悬停时播放，而在加载时不自动播放。

非常感谢您的帮助。

Answer 1

您要将事件侦听器添加到函数中未定义的viewport中。给所有这样的项目一个类名。按类名称获取所有元素，遍历每个项目，然后附加事件监听器。

   window.onload = function(){
      let video = document.getElementByClassName('wp-video-shortcode')
      for (let i = 0; i < video.length; i++) {
        video[i].addEventListener('mouseover', function() { video.play() }, false);
        video[i].addEventListener('mouseout', function() { video.pause() }, false);
      }
   }

Event listener on class name

鼠标悬停播放视频

1 个答案: