如何使用javascript动态添加videojs播放器?

时间:2013-11-18 11:56:29

标签: javascript angularjs video video.js

对这个问题的任何启示都会非常有帮助。

我要做的就是用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>

因此,对于数组“面板”中的每个对象,我想要显示一个视频。如果我在页面加载后尝试添加视频,则视频无法正常初始化,它们只会添加正常的视频标记。

我试过用:

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

        });

手动设置播放器,但没有成功。

有人遇到过这个问题并设法解决了吗?

我很乐意为此做一个js小提琴,但我已经使用了角度为我的应用程序,我永远不能让它在jsfiddle中正常工作。

感谢您提前阅读和提供帮助

1 个答案:

答案 0 :(得分:2)

我使用

解决了这个问题
myPlayer.dispose(); 
播放器对象上的

然后使用

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

在我在dom中创建一个新的播放器对象后初始化它。

所以我认为我的问题与2个对同一个玩家对象的引用有关。