我正在使用Popcornjs迈出第一步,我正在尝试使用代码插件,但不确定该怎么做。
我按照这个例子,让视频播放,但我不能使用插件。
索引.html:
<script src="bower_components/popcornjs/popcorn.js"></script>
<script src="bower_components/popcornjs/wrappers/common/popcorn._MediaElementProto.js"></script>
<script src="bower_components/popcornjs/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js"></script>
<script src="bower_components/popcornjs/plugins/code/popcorn.code.js"></script>
媒体.js
$scope.player = Popcorn.HTMLYouTubeVideoElement( "#media-player" );
$scope.player.src = "http://www.youtube.com/watch?v=DaN2Y2-wNSs";
以下行失败
//$scope.player.code({
// start: Popcorn.util.toSeconds( 2 ),
// onStart: function () {
// console.log( "I am here" );
// }
//});
对象 # 没有方法"代码"
如何使用插件?
干杯
它不起作用,因为您实际上并没有创建一个爆米花实例。包装器背后的命名约定有些令人困惑,可能应该更改。
当您创建了一个新的 HTMLYouTubeVideoElement 对象时,该对象将仅控制播放器与 YouTube 视频的基本交互。要用它创建一个爆米花实例,您只需将该对象传递给爆米花。您的代码最终应如下所示:
$scope.player = new Popcorn.HTMLYouTubeVideoElement( "#media-player" );
$scope.player.src = "http://www.youtube.com/watch?v=DaN2Y2-wNSs";
$scope.player = new Popcorn( $scope.player );
$scope.player.code({
start: Popcorn.util.toSeconds( 2 ),
onStart: function () {
console.log( "I am here" );
}
});
这将创建一个新的HTMLYouTubeVideoElement对象,然后将其传递给Popcorn并创建一个Popcorn实例。需要爆米花实例才能向视频添加新事件。
要将第三方库集成到 Angular 中,您需要创建一个指令。任何与 DOM 有关的事情都需要你创建一个指令。创建指令后,您将对指令的 link
函数内的元素执行这些操作。链接函数发生在 Angular 编译代码之后,你可以把它想象成 jQuery 的document.ready
,除了它在元素级别。
myapp.directive('popcornPlayer', function(){
return:{
restrict: 'EA',
link: function(scope, element, attributes){
var player = Popcorn.HTMLYouTubeVideoElement(element);
player.src = attributes.src;
player.code( /* stuff */ );
}
}
});
现在你可以做这样的事情:
<popcorn-player src="http://www.youtube.com/watch?v=DaN2Y2-wNSs"></popcorn-player>
还有卡布拉莫!魔法。您可能还想使用attributes.$observe
来使其真正具有棱角分明的魔力。