Question

我正在创建一个HTML5视频播放器，需要在滑动条上创建章节标记。标记是具有透明中心的空心椭圆。我希望标记在显示视频时隐藏进度（擦洗）和缓冲条。

我想要完成的事情。

我找到的最接近的解决方案是this one，但我不能使用jquery。此外，由于我需要跨浏览器兼容性，我不能使用mix-blend-mode。我已经尝试过更改z-index和显示属性，但没有得到所需的结果。

对于精简的工作示例，请运行代码段。谢谢，好人。

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>

public class AccountListAdapter extends ArrayAdapter<Account> {       
  private List<Account> cuentas;
  private Context context;    
  private AccountListStore loginstore;    

  public AccountListAdapter(Context context) {
    super(context, R.layout.acount_listadapter, new ArrayList());
    this.loginstore = new AccountListStore(context);
    try {
        this.cuentas = loginstore.getAccounts();
    } catch (SQLException e) {
        this.cuentas = new ArrayList<>();
        e.printStackTrace();
    }
    this.addAll(cuentas);
}

Answer 1

我完全重新设计了你的代码片段，我认为这就是你想要的。

您的javascript代码（未包含）应计算填充程序的宽度值

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

如何使HTML5元素有选择地隐藏兄弟元素？

1 个答案: