Скрыть кнопку на видео js play ()?

Question

У меня есть кнопка воспроизведения внутри видео js видео / контейнер, и я бы хотел, чтобы кнопка скрывалась () при воспроизведении видео. Это работает, если я просто использую $ ('. 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

Что вы можете сделать, укажите идентификатор кнопки, который является идентификатором видео с некоторым префиксом или суффиксом, при функции воспроизведения получите идентификатор видео и вставьте суффикс или префикс и скройте эту кнопку. В приведенном ниже примере v_6563228568228 - это идентификатор видео, а btn_v_6563228568228 - идентификатор кнопки, который совпадает с идентификатором видео с префиксом btn_ . Таким образом вы можете указать уникальный идентификатор на вашу кнопку.

Пример.

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