有没有什么办法可以在没有自定义元素polyfill的情况下使用清晰度图标？

<div class="video-player">
  <div class="quality-icon" data-quality="hd"></div>
</div>

.video-player {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #000;
}

.quality-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url('path/to/quality-icons.png');
  background-repeat: no-repeat;
}

.quality-icon[data-quality="hd"] {
  background-position: 0 0; /* 设置背景图位置以显示对应的清晰度图标 */
}

.quality-icon[data-quality="sd"] {
  background-position: -20px 0;
}

.quality-icon[data-quality="ld"] {
  background-position: -40px 0;
}