视频.js播放器在释放并重新初始化后无法播放

Video.js Player Fails To Play After Dispose And Re-Initialize

本文关键字：初始化 播放 播放器 js 释放 视频      更新时间：2023-09-26

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

这是按照您正在做的事情进行的，并且没有错误。

<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

相关文章：