javascript - Angularjs。如何获取全局 jquery 对象和其他(jQuery 插件/Angularjs 东西!)？

Question

我想使用 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 源放在视频 src 中，一切都可以。

如果我在加载应用程序时在 currentMusic 中添加一个值，然后我等待 2 秒来创建 mediaelementjs 对象，一切都很好!

为什么？

第二个问题

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

所以我必须使用 setSrc()

所以当我点击我应用程序其他部分的链接时，我想更改视频源。 但是我怎样才能得到我的 mediaelement 对象呢？

那么如何使用 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

Answer 1

在 $observe 中放入你的指令:

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

所以每次更改 SRC 后你都会初始化你的插件

第二个问题有不同的解决方案，例如使用范围/服务:

scope.mediaObject = $(element).mediaelementplayer();

更新:

我已经阅读了 MediaElementPlayer 的文档，所以应该非常简单:

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