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

我正在尝试在模式弹出窗口中使用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>

---

这与您正在做的事情是一致的，并且不会出错

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

添加播放器
移除播放器
var open_modal_button=document.getElementById（'add'）；
var close_modal_button=document.getElementById（'remove'）；
打开“模式”按钮。addEventListener（“单击”，函数（）{
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'）；
视频。追加子项（来源）；
录像部门附属儿童（录像）；
videojs（'vid1'，{}，function（）{}）；
关闭模式按钮。删除属性（“禁用”）；
打开模式按钮。setAttribute（'disabled'，true）；
});
关闭模式按钮。添加EventListener（“单击”，函数（e）{
var player=videojs（'vid1'）；
player.dispose（）；
打开“模式”按钮。删除属性（“禁用”）；
关闭模式按钮。setAttribute（'disabled'，true）；
});

示例：

请同时阅读文档。我不得不对你没有显示的代码做一些假设，所以不一定要重现你的情况。

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