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