Как сделать элемент HTML5 выборочно скрывать элементы-братья?

Я создаю видеопроигрыватель HTML5 и вам нужно создать маркеры разделов на панели скрабов. Маркеры представляют собой полые эллипсы с прозрачными центрами. Я хочу, чтобы маркеры скрывали прогресс (скраб) и полосы буфера при показе видео.Как сделать элемент HTML5 выборочно скрывать элементы-братья?

То, что я пытаюсь выполнить.

Ближайшее решение, которое я нашел, это this one, но я не могу использовать jquery. Кроме того, поскольку мне нужна совместимость между браузерами, я не могу использовать mix-blend-mode. Я экспериментировал с изменением атрибутов z-index и display и не получил необходимых результатов.

Для упрощенного рабочего примера, пожалуйста, запустите фрагмент кода. Спасибо, хорошие люди.

var progress = document.getElementById('progress'); 
 
var bufferBar = document.getElementById('buffer'); 
 
var divID = document.getElementById('c-markers'); 
 

 
for (var i = 0; i < 3; i++) { 
 
    var anchor = document.createElement('a'); 
 
    anchor.id = "marker" + i; 
 
    divID.appendChild(anchor); 
 

 
    var marker = document.getElementById("marker" + i); 
 
    marker.style.backgroundImage = "url('http://i.imgur.com/YTWgnzn.png')"; 
 
    marker.style.left = (i * 150) + 'px'; 
 

 
    progress.value = .33; 
 
    bufferBar.value = .66; 
 
}

html { 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
section { 
 
    position: relative; 
 
    min-width: 640px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    line-height: 0; 
 
} 
 

 
#player { 
 
    background-color: #252525; 
 
    height: 40px; 
 
    width: 100%; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
      align-items: center; 
 
} 
 

 
.controls { 
 
    width: 98%; 
 
    height: 80%; 
 
} 
 

 
.controls .progress-container { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 0 .5rem; 
 
} 
 

 
.controls progress { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    background: transparent; 
 
    border: none; 
 
    width: 100%; 
 
} 
 

 
.controls progress::-webkit-progress-bar { 
 
    background: transparent; 
 
} 
 

 
.controls progress::-webkit-progress-value { 
 
    background: transparent; 
 
} 
 

 
progress.progress-bar, 
 
progress.buffer-bar { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 2px; 
 
    margin-top: 15px; 
 
    cursor: pointer; 
 
} 
 

 
progress.progress-bar { 
 
    z-index: 1000; 
 
} 
 

 
progress.buffer-bar { 
 
    z-index: 100; 
 
} 
 

 
progress.buffer-bar::-webkit-progress-value { 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
progress.buffer-bar::-moz-progress-bar { 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
progress.progress-bar::-webkit-progress-value { 
 
    background: red; 
 
} 
 

 
progress.progress-bar::-moz-progress-bar { 
 
    background: red; 
 
} 
 

 
progress { 
 
    background-color: rgba(100, 100, 100, 0.2); 
 
} 
 

 
progress.progress-bar { 
 
    color: red; 
 
} 
 

 
progress[value]::-webkit-progress-bar { 
 
    background: rgba(100, 100, 100, 0.2); 
 
} 
 

 
#c-markers { 
 
    width: 100%; 
 
} 
 

 
#c-markers a { 
 
    position: absolute; 
 
    width: 10px; 
 
    height: 10px; 
 
    cursor: pointer; 
 
    overflow: visible; 
 
    margin-top: 11px; 
 
    z-index: 10000; 
 
}

<body> 
 
    <section id="section-container"> 
 
    <div id="player"> 
 
     <div class="controls"> 
 
     <div class="progress-container"> 
 
      <div id="c-markers"></div> 
 
      <progress id="progress" class="progress-bar" value="0" min="0"></progress> 
 
      <progress id="buffer" class="buffer-bar" value="0" min="0"></progress> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</body>

источник

2016-05-11 sabre

Это безопасно предположить синий фон/видео будут видны через диски? Любой шанс просто настроить дизайн? –

Почему бы просто не переписать решение в вопросе, с которым вы связаны, как обычный старый JavaScript? – Shaggy

@MarkHandy: да, синий фон будет виден через диски. Клиент предоставил спецификации, и я не имею права на настройку. – sabre

Я полностью переработан свой фрагмент кода, я думаю, что это то, что вы хотите.

Ваш код Javascript (не входит в комплект) следует вычислять значения ширины наполнителей

.markers { 
 
    width: 600px; 
 
    height: 50px; 
 
    border: solid 1px blue; 
 
    margin: 5px; 
 
    display: flex; 
 
    background-image: radial-gradient(circle, lightgreen, lightblue); 
 
} 
 

 
.filler { 
 
    height: 5px; 
 
    margin-top: 23px; 
 
    background-image: linear-gradient(to right, red 600px, white 600px); 
 
    background-attachment: fixed; 
 
    background-size: 1200px 20px; 
 
    background-position: -600px 0px; 
 
    animation: progress 5s infinite linear; 
 
} 
 

 
@keyframes progress { 
 
    from {background-position: -600px 0px;} 
 
    to {background-position: 0px 0px;} 
 
} 
 

 
#filler1 { 
 
    width: 100px; 
 
} 
 

 
#filler2 { 
 
    width: 80px; 
 
} 
 

 
#filler3 { 
 
    width: 260px; 
 
} 
 

 
.item { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin-top: 4px; 
 
    border: solid 2px blue; 
 
    border-radius: 50%; 
 
}

<div class="markers"> 
 
    <div class="item"></div> 
 
    <div class="filler" id="filler1"></div> 
 
    <div class="item"></div> 
 
    <div class="filler" id="filler2"></div> 
 
    <div class="item"></div> 
 
    <div class="filler" id="filler3"></div> 
 
    <div class="item"></div> 
 
</div>

источник

2016-05-11 20:47:50 vals

Хорошее решение, vals. Я не уверен, как я могу разделить прогресс и буферные бары на отдельные длины, однако, поскольку бары представляют общую продолжительность видео. – sabre

Как сделать элемент HTML5 выборочно скрывать элементы-братья?

ответ

Смежные вопросы