Как скрыть элементы управления HTML-видео для всех видео на одной странице

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, которые скрывают элементы управления, пока пользователь не наведет на них курсор:

<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 = "videoElement" , я бы рекомендовал использовать класс (например, class = "videoElement" ).

Кроме того, document.getElementById возвращает толькоодин элемент, поэтому ваши слушатели не будут добавлены ко всем элементам.Есть несколько способов решить эту проблему.Можно было бы перебрать все элементы и добавить прослушиватели.

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

Или вы можете использовать делегирование событий здесь.Вы можете установить события в теле, а затем проверить, является ли цель события видеоэлементом.

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