我想使用http://mediaelementjs.com/在我的应用中播放多个youtube视频。所以我创建了一个加载mediaelementjs的指令:

指令

.directive('mediaelement', function() {
    return {
        link: function(scope, element, attrs) {
            $(element).mediaelementplayer();
        }
    }
})

我有我这样的球员:

播放器
<video id="player" controls width="374px" height="301px" type="video/youtube" src="{{currentMusic}}" youtube>

因为它是youtube视频,所以medialementjs使用Flash。

第一个问题
currentMusic仅在以后初始化,并且当我更改currentMusic时,DOM会被正确修改,但mediaelementjs不会更改源,并且当我单击播放时不会播放任何内容,因为Flash对象上的源仍然是{{currentMusic}}(未绑定(bind))

但是,如果我直接将youtube源放在video src中,一切正常。

如果我在应用程序加载时在currentMusic中输入一个值,然后我等待2秒钟来创建mediaelementjs对象,那么一切都还可以!

为什么呢

第二个问题

如果在播放视频后删除第一个mediaelementjs对象,则更改currentMusic,然后创建一个新的medialementjs对象,即正确更改了源。

所以我必须使用setSrc()

因此,当我单击应用程序其他部分的链接时,我想更改视频的来源。
但是我如何获得我的调解对象呢?

那么,如何使用angularjs和mediaelementjs制作youtube视频播放列表?

我真的希望我很清楚...我花了两天的时间试图理解发生的事情并使事情正常进行,但是我失败了...

资源 :
How do I get mediaelement.js player state (paused, volume, etc.)?

http://johndyer.name/html5-video-wrapper-for-youtube-and-vimeo-api-mediaelement-js/

media player object from directive

最佳答案

放在$ observ 里面:

attrs.$observe('src', function(src) {
      $(element).mediaelementplayer();
 });

因此,每次更改SRC后,您都会初始化插件

第二期有不同的解决方案,例如使用范围/服务:
scope.mediaObject = $(element).mediaelementplayer();

UPD:

我已经阅读了MediaElementPlayer的文档,因此应该非常简单:
attrs.$observe('src', function(src) {
    $(element).mediaelementplayer().setSrc(src);
});

09-16 20:45
查看更多