我想使用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);
});