Блог

Главная - Вопросы по программированию - Элемент отображается как удаленный в инструментах разработчика, но все еще визуально присутствует на странице

Элемент отображается как удаленный в инструментах разработчика, но все еще визуально присутствует на странице

#javascript #css #brightcove

#язык JavaScript #CSS #брайткоув

Вопрос:

У меня есть проигрыватель Brightcove, и я хочу изменить кнопку воспроизведения на кнопку паузы, когда проигрыватель приостановлен.

Это тот самый игрок:

 lt;div style="position: relative; display: block; max-width: 1515px;"gt;lt;div style="padding-top: 50.77574047954866%;"gt;lt;video id="myPlayerID3" '    ' data-video-id="'   data3.videoId   '" '    ' data-account="'   data3.accountId   '" '    ' data-player="'   data3.playerId   '" '    ' data-embed="default" class="video-js" '    ' controlsgt;lt;/videogt;

И это стиль кнопки:

 #myPlayerID3 .vjs-big-play-button {  display: block;  background: url(myurl) 25% center/contain no-repeat;  right:0px;  left:10%;  top:68%;  bottom:0;  position:absolute;  border-radius: 0;  width:10%;  height: 12%;  }

И это код, который обрабатывает событие паузы:

 $(document).ready(function() {  var artist_video = document.querySelector("#artist_video");  var artist_video_play_button = artist_video.querySelector(".vjs-big-play-button")  videojs.getPlayer('myPlayerID3').on('pause',function(){  artist_video_play_button.style.background = "url(myurl) 25% center/contain no-repeat";  });

Код срабатывает нормально, когда плеер приостановлен, но это происходит: введите описание изображения здесь

Появится кнопка паузы, но кнопка воспроизведения не исчезнет. И если я проверю стили в инструментах разработчика, вы увидите, что изображение «воспроизведение» помечено как зачеркнутое (свойство фона #myPlayerID3 ), но оно все еще видно на странице:

введите описание изображения здесь

Если я сниму флажок с фонового стиля в инструментах разработчика, он исчезнет. Это что, рендеринг?

Я попытался удалить такой стиль

 artist_video_play_button.removeAttribute("style");

или вот так

 artist_video_play_button.style.background = null;

Но это не сработало

Комментарии:

1. вместо того, чтобы изменять изображение с помощью JS, попробуйте сделать это в css. т. е. на паузе добавьте класс к кнопке .vjs-big-play и в css добавьте фоновое изображение в этот класс. Посмотрим, сработает ли это

2. Я только что сделал это на паузе: artist_video_play_button.classList.add("paused"); и в .paused классе есть только этот стиль css: .paused { background: url(myurl) 25% center/contain no-repeat} . Это не сработало. На этот раз даже кнопка «пауза» не появилась

3. В инструменте разработки вы можете увидеть класс «приостановлено» со значением?

4. На самом деле я этого не делаю. Я не вижу, чтобы этот класс был добавлен в элемент кнопки воспроизведения.

5. даже если я это сделаю artist_video_play_button.remove(); , элемент все еще там, он не будет удален

Ответ №1:

Проблема заключалась в том, что brightcove создает кнопку при сбросе HTML-кода на странице, и эта кнопка принимает классы div (который также действует как кнопка), и, следовательно, это стили. Решение состояло в том, чтобы полностью удалить кнопку после того, как brightcove породил ее HTML-содержимое, то есть после $(document).ready(function() =gt;{})

В конце концов мы решили отказаться от brightcove и переключиться на CDN и простые video теги HTML5, потому что эта концепция создания HTML-кода brightcove во время рендеринга страницы создавала значительное количество проблем с настройкой

Метки: ,