隱藏videojs play（）上的按鈕？

Question

我在視頻 js 視頻/容器內有一個播放按鈕，我希望該按鈕在視頻播放時隱藏（）。 如果我只是在播放 function 上使用 $('.video-play-btn).hide() 就可以了，但問題是我頁面上有很多視頻，所以它把它們都隱藏了，我只想要正在播放的視頻播放按鈕隱藏。

html：

   <div class="col-lg-6">
        <video-js data-video-id="6563228568228"
                  data-embed="default"
                  data-application-id=""
                  class="video-js video-container--outer full-width"
                  controls
                  id=""
                  webkit-playsinline="true" playsinline="true"></video-js>
        <!-- play button -->
        <button class="video-play-btn btn"><i class="fa fa-play fa-play-video-inline"></i></button>
    </div>

jquery：

var videoPlayer = videojs('video-one');

 videoPlayer.on('play', function () {
        $(this).parent().find('.video-play-btn').hide();
    });

Answer 1

你可以做什么給按鈕ID，它是帶有一些前綴或后綴的視頻ID，在播放function時獲取視頻ID並嵌入后綴或前綴並隱藏該按鈕。 在下面的示例中， v_6563228568228是視頻 ID， btn_v_6563228568228是按鈕 ID，與視頻 ID 相同，前綴為btn_ 。這樣您可以為按鈕提供唯一 ID。

例子。

<div class="col-lg-6">
          <video
    id="v_6563228568228"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="https://mobamotion.mobatek.net/samples/sample-mp4-video.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  <button class="video-play-btn btn" id="btn_v_6563228568228"><i class="fa fa-play fa-play-video-inline"></button>
    </div>

  <script>
  var videoPlayer = videojs('v_6563228568228');

 videoPlayer.on('play', function () {
        vid_id = $(this).attr('id');
        $("#btn_"+vid_id).hide();
    });
  </script>