Video.js 播放器在处理和重新初始化后无法播放

Question

我正在尝试在模式弹出窗口中使用 video.js 播放器。我在模态加载时初始化播放器，并在模态关闭时处理它。第一次可以正常工作，但是当我尝试再次打开弹出窗口并重新初始化播放器时，它不会在控制台中出现错误。

这是我的代码：

<a href="#openModal" id="open_modal_button">Open Modal</a>
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close" id="close_modal_button">X</a>
        <div id='videoDiv'> </div>
    </div>
</div>

<script type="text/javascript">
open_modal_button.addEventListener("click", function() {
    var videoDiv = document.getElementById('videoDiv');
    var video = createVideoElement('vid1');
    addSource(video, "http://foo.mp4");
    videoDiv.appendChild(video);
    videojs('vid1', {}, function() {})
});

close_modal_button.addEventListener("click", function(e) {
    var player = videojs('vid1');
    player.dispose();
});
</script>

当我第二次启动模式时，我在浏览器控制台中收到这些错误消息：

Uncaught TypeError: window.videojs[componentClass] is not a function    video.debug.js
Uncaught TypeError: Cannot read property 'className' of null            video.debug.js

Answer 1

这与您正在做的事情一致，并且可以正常工作。

<button id="add">Add player</button>
<button id="remove" disabled>Remove player</button>
<div id="videoDiv"></div>

<script type="text/javascript">
  var open_modal_button = document.getElementById('add');
  var close_modal_button = document.getElementById('remove');

  open_modal_button.addEventListener("click", function() {
    var videoDiv = document.getElementById('videoDiv');
    var video = document.createElement('video');
    var source = document.createElement('source');
    video.id = 'vid1';
    video.className = 'video-js vjs-default-skin';
    video.setAttribute('controls', 'controls');
    source.setAttribute('src', 'http://vjs.zencdn.net/v/oceans.mp4');
    source.setAttribute('type', 'video/mp4');
    video.appendChild(source);
    videoDiv.appendChild(video);
    videojs('vid1', {}, function() {});
    close_modal_button.removeAttribute('disabled');
    open_modal_button.setAttribute('disabled', true);
  });

  close_modal_button.addEventListener("click", function(e) {
    var player = videojs('vid1');
    player.dispose();
    open_modal_button.removeAttribute('disabled');
    close_modal_button.setAttribute('disabled', true);
  });
</script>

示例：http://output.jsbin.com/ciqoji