обновление источника видеоплеера - PullRequest
Новая
       7

обновление источника видеоплеера

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

Я пытаюсь обновить source элемент video, когда пользователь нажимает на ссылку.

Вот код: 

<a href="javascript:void(0);" onclick="load_src(this);lightbox_open();" data-link="<?php echo $list['file_path']; ?>">
   <?php echo $list['name'];?> <i class="fa fa-caret-square-o-right"></i>
</a>

Здесь сначала я попытался загрузить исходный кодload_src(), а затем вызовите функцию, чтобы открыть видеопроигрыватель lightbox_open(). 

function load_src(el) {
  var video_player_el_src = document.getElementById('video_player_frame').getElementsByTagName('source')[0];
  video_player_el_src.setAttribute('src', el.getAttribute('data-link'));
}

function lightbox_open() {
  videojs('video_player_frame').ready(function() {
    lightBoxVideo = this;
    window.scrollTo(0, 0);
    document.getElementById('light').style.display = 'block';
    document.getElementById('fade').style.display = 'block';
    lightBoxVideo.play();
  });
}

А вот элементный блок video: 

<div id="light">
  <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
    <video id="video_player_frame" class="video-js vjs-default-skin" controls preload="none" width="595" data-setup="{}">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      <!--Browser does not support <video> tag -->
      <p class="vjs-no-js">Javascript is disabled.</p>
    </video>
</div>

При проверке DOM, *Атрибут 1017 * обновляется с желаемым значением, но игрок все равно загружает initial link "http://vjs.zencdn.net/v/oceans.mp4".

. Если я изначально оставляю пустым src, то есть <source src="" .. >, я получаю "No compatible source was found for this media", чтоочевидно.

1 Ответ

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

Вы используете videojs для воспроизведения видео, поэтому вам нужно изменить источник проигрывателя. 

var player = videojs('video_player_frame');

var changeLink = document.getElementById('my-change-src-link');
changeLink.addEventListener('click', function(event) {
  player.src(event.target.getAttribute('data-link'));
});
...