视频播放器源更新

Question

当用户单击链接时，我正在尝试更新 video 元素的 source 元素。

代码如下：

<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 时，source src 属性会更新为所需的值，但播放器仍会加载 initial link "http://vjs.zencdn.net/v/oceans.mp4"。

如果我最初将src 留空，即<source src="" .. >，我会得到"No compatible source was found for this media"，这是显而易见的。

Answer 1

您正在使用 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'));
});