如何使用JavaScript动态添加video.js播放器？

Question

任何关于这个问题的启示都将非常有帮助。

我所要做的就是使用JavaScript动态添加一个videojs播放器。

<div class="video-wrapper" ng-repeat="videos in panel">
        <button class="remove-video" ng-click="removeFromPanel($index)">x</button>
        <video id="{{videos.id}}" class="video-js vjs-default-skin" preload="none" controls width="300" height="210"
              poster="" >
              <source src="{{videos.directory}}" type='video/mp4' />
        </video>
    </div>

对于数组“panel”中的每个对象，我希望显示一个视频。如果在页面加载后尝试添加视频，则视频不会正确初始化，它们只会作为普通视频标记添加。

我已经尝试使用：

_V_("player id", { "controls": true, "autoplay": false, "preload": "auto" }, function(){
        // Player (this) is initialized and ready.

        });

尝试手动设置播放器，但没有成功。

有人遇到这个问题并成功解决了吗？

我想为此做一个jsfiddle，但我的应用程序中使用了angular，我无法在jsfiddle中正确地使用它。

谢谢阅读和提前的帮助。

- Aidan Gee

Answer 1

我用以下方法解决了这个问题：

myPlayer.dispose(); 

在玩家对象上，然后使用。

_V_("player id", { "controls": true, "autoplay": false, "preload": "auto" }, function(){
    // Player (this) is initialized and ready.
    });

在我在DOM中创建了一个新的玩家对象后，我希望您能帮助我初始化它。

因此，我认为我的问题与具有两个对同一玩家对象的引用有关。

- Aidan Gee