Добавьте JavaScript-функцию Brightcove в цикл jQuery .each (). - PullRequest
Новая
       25

Добавьте JavaScript-функцию Brightcove в цикл jQuery .each ().

0 голосов
/ 27 ноября 2018

Я пытаюсь добавить проигрыватель Brightcove, используя пример JavaScript, предоставленный в их документации по API.Мне нужно добавить видео в модальное окно, но использование стандартного встраивания приводит к низкому разрешению, поскольку проигрыватель запускается с меньшим размером, а затем увеличивается в модальном окне.

Я получил код для работыхорошо с одним видео, как показано в этом Codepen: https://codepen.io/kennycrippen/pen/WYOoxK

Что мне нужно сделать, это создать цикл для запуска этого кода для нескольких видео на странице.Я чувствую, что я близко, используя jquery .each (), но я продолжаю получать сообщение об ошибке «Uncaught TypeError: Предоставленный элемент или идентификатор недействителен».Эта ошибка относится к строке, в которой myPlayer определен в функции обратного вызова.

Вот ссылка на незавершенный код, выполняемый my: https://codepen.io/kennycrippen/pen/MzOoQN

Код следующий:

HTML: 

<div class="container" data-account-id ="4090876643001" data-video-id="5860095739001">

    <button data-open="video-1" class="button">Open it</button>

    <div class="large reveal video-modal video-1" id="video-1" data-reveal>
        <div class="placeHolder" id="placeHolder-1"></div>
    </div>

</div>

<div class="container" data-account-id ="4090876643001" data-video-id="5860097702001">

    <button data-open="video-2" class="button">Open it 2</button>

    <div class="large reveal video-modal" id="video-2" data-reveal>
        <div class="placeHolder" id="placeHolder-2"></div>
    </div>

</div>

JavaScript / jQuery: 

$(document).foundation();

$( document ).ready(function() {
$('.container').each(function(i) {

  $t = $(this);
  $accountId = $t.data('accountId');
  $videoId = $t.data('videoId');
  $playerId = "EUmE7oJdZ";

  // +++ Build the player and place in HTML DOM +++
  function addPlayer() {
    // Dynamically build the player video element
    console.log("myPlayerID-" + i);
    playerHTML =
      '<video-js class="video-js vjs-16-9 myVideo" id="myPlayerID-'+ i +'" data-video-id="' +
      $videoId +
      '"  data-account="' +
      $accountId +
      '" data-player="' +
      $playerId +
      '" data-embed="default" class="video-js" controls></video-js>';
    // Inject the player code into the DOM
    $t.find('.placeHolder').innerHTML = '<div>things</div>';
    // Add and execute the player script tag
    var s = document.createElement("script");
    s.src =
      "https://players.brightcove.net/" +
      $accountId +
      "/" +
      $playerId +
      "_default/index.min.js";
    // Add the script tag to the document
    document.body.appendChild(s);
    // Call a function to play the video once player's JavaScropt loaded
    s.onload = callback;
  }

  // +++ Initialize the player and start the video +++
  function callback() {
    myPlayer = bc("myPlayerID-" + i);
    // Can also use the following to assign a player instance to the variable if you choose not to use IDs for elements directly
    // myPlayer = bc($('.myVideo'));
    myPlayer.on("loadedmetadata", function() {
      // Mute the audio track, if there is one, so video will autoplay on button click
      // myPlayer.muted(true);
      // myPlayer.play();
    });
  }
  $t.find('.button').on('click', function() {
    addPlayer();
    // alert($(this).data('open'));
  });

});

});

Спасибо.

...