Popcorn.jsがAngular.jsで動作していません

Question

私の鋭いプロジェクトでpopcorn.jsの簡単なテストを追加しようとしましたが、何もしませんでした。

私はui-routerを使用しています。 私はpopcorn.jsは私が私のビューのいずれかに以下を追加私のindex.html

にCDN参照しています：

<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source> 
</video> 

<script> 
    // Create a popcporn instance by calling Popcorn("#id-of-my-video") 
var pop = Popcorn("#video"); 


// add a footnote at 2 seconds 
pop.footnote({ 
     start: 2, 
     end: 6, 
     text: "This footnote is the stepping stone of progress!", 
     target: "footnote-container" 
    }); 

// play the video right away 
pop.play(); 

</script> 

彼らが使用する正確なpopcorn.jsの一例です。

私はプロジェクトを見ると、私はビデオを取得しますが、ポップはありません！

助けがあれば助かります。

角度のためのより良い何かがなければならない...

が更新さを考える：私の角度の設定はとても簡単です。 Popcorn.jsのcdnを参照するだけで、他のすべての角度コードが正常に動作しているので、インデックスを表示する必要はありません。私が上に表示したのは、私が "view" =に持っているコードです。

マイapp.js：

'use strict'; 

/** 
* @ngdoc overview 
* @name clientApp 
* @description 
* # clientApp 
* 
* Main module of the application. 
*/ 
angular 
    .module('clientApp', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ui.router', 
    'ngSanitize', 
    'ngTouch' 
    ]) 
    .config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider, $stateProvider){ 
    $urlRouterProvider.otherwise('main'); 

    $stateProvider 
    .state('/', { 
     url:'/main', 
     templateUrl:'views/main.html' 
    }); 

    }]); 

関連するビューは、単にUI-ルータをコンフィグし、コントローラに何もしません。

'use strict'; 

angular.module('clientApp') 
.config(function($stateProvider){ 
    $stateProvider 
    .state('video', { 
    url:'/video', 
    templateUrl:'views/video.html', 
    controller:'VideoController as video' 
    }) 
}) 
.controller('VideoController', function(){ 

}) 

Answer 1

あなたはこの欠落していない：ちょうどビデオタグの後に

<div id="footnote-container"></div>, 

を。

ないが、問題、ドキュメントごとなど（101ビデオ）：

1. タグが体内に行くビデオ。
2. スクリプトは動画の説明に従って頭の中に入ります。

ちょうどビデオに従ってください。