HTML5要素を選択的に兄弟要素を非表示にするにはどうすればよいですか？

私はHTML5ビデオプレーヤーを作成しており、スクラブバーにチャプタマーカーを作成する必要があります。マーカーは、透明な中心を有する中空の楕円である。ビデオを見ながら、マーカーに進行状況（スクラブ）とバッファーバーを隠しておきたい。HTML5要素を選択的に兄弟要素を非表示にするにはどうすればよいですか？

私が達成しようとしていること。

私が見つけた最も近い解決策はthis oneですが、私はjqueryを使用できません。また、ブラウザ間の互換性が必要なので、私はmix-blend-modeを使うことができません。私はz-indexと表示属性を変更して実験しましたが、必要な結果を得ていませんでした。

小規模な作業例の場合は、コードスニペットを実行してください。ありがとう、良い人。

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

良い解決策、価値。しかし、棒グラフはビデオの合計時間を表しているので、どのように進捗バーとバッファーバーを個々の長さに分割できるのかよくわかりません。 – sabre

HTML5要素を選択的に兄弟要素を非表示にするにはどうすればよいですか？

答えて

関連する問題