Question

我有一个页面充满了使用php foreach循环创建的电影，如下所示：

   foreach ($movies as $movie) {

        $pos = strrpos($movie, '/');
        $id = $pos === false ? $movie : substr($movie, $pos + 1);
            $image = $lookup[pathinfo($movie, PATHINFO_FILENAME)] ?? $temp;
            $sub = $lookup2[pathinfo($movie, PATHINFO_FILENAME)];
            $withoutExt = preg_replace('/\\.[^.\\s]{3,4}$/', '', $id);
            $xml = simplexml_load_file($dir . '/xml/' . $withoutExt . '.xml');
        echo '<div class="grid-containerTest">';
        if (file_exists($dir . '/xml/' . $withoutExt . '.xml')){
        echo '<div class="grid-item item1"><h3>' . $xml->title . '</h3></div>';
        }else{
            echo '<div class="grid-item item1"><h3>' . $withoutExt . '</h3></div>';
        }
        echo '<div class="grid-item item2"><video width="300" height="400" poster="'. $image .'" preload="none" id="videoElement">';
        echo '<source src="'. $movie .'" type="video/mp4">';
        echo '<track src="' . $sub . '" kind="subtitles" srclang="en-US" label="English" />Your browser does not support HTML5 video.</video></div>';
        echo '<div class="grid-item item3">' . $xml->overview . '<br /><br />';
        echo "Added on: " . date("F d Y.", filectime($movie)) . '</div>';
        echo '<br /><br /></div>';
    }

然后我在页脚中存储了一些JS，这些JS隐藏了控件，直到用户将鼠标悬停在它们上方：

<script type="text/javascript">
    (function(window) {
        function setupVideo()
        {
            var v = document.getElementById('videoElement');
            v.addEventListener('mouseover', function() { this.controls = true; }, false);
            v.addEventListener('mouseout', function() { this.controls = false; }, false);
        }

        window.addEventListener('load', setupVideo, false);
    })(window);
</script>

工作正常。对于加载到页面中的第一个视频。其他的则无法播放，因为它们不再具有任何控件。那么我该怎么做才能确保它适用于每个视频？

Answer 1

首先，您只能在页面上使用一次相同的id属性。 ID应该是唯一的。建议不要使用 id =“ videoElement” ，而是建议使用一个类（例如 class =“ videoElement” ）。

除了document.getElementById之外，它仅返回单个元素，因此不会将您的侦听器添加到所有元素。有几种解决方法。一种是遍历所有元素并添加侦听器。

document.querySelectorAll('.videoElement').forEach(function (videoElement) {
    // Add listeners to video element: videoElement.addEventListener....
});

或者您可以在此处使用事件委托。您可以将事件设置为正文，然后检查事件的目标是否为videoElement。

document.body.addEventListener('mouseover', function (mouseEvent) {
    if (mouseEvent.target.getAttribute('class') === 'videoElement') {
        // show controls
    }
});

如何隐藏一页上所有视频的HTML视频控件

1 个答案: