Popcorn.js 在 Angular.js 中不工作

Question

我试图在我的 angular 项目中为 popcorn.js 添加一个简单的测试，但什么也没有。

我正在使用 ui-路由器。我在 index.html

中引用了 popcorn.js 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 示例。

当我查看项目时，我得到了视频，但是 none 流行！

任何帮助都会很棒。

认为 angular 一定有更好的东西...

更新：我的 angular 设置非常简单。不需要显示我的索引，因为它只是引用 Popcorn.js 的 cdn，所有其他 angular 代码都工作正常。我上面显示的是 "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-router 并且在控制器中什么都不做。

'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

Are you not missing this:

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

just after the video tags.

虽然不是问题，但根据文档（101 视频）：

The video tags go inside the body.

The scripts go inside head as explained in the video.

跟着视频就行了。

Popcorn.js 在 Angular.js 中不工作

Popcorn.js not working in Angular.js

angularjs

angularjs-directive

jquery-plugins

html5-video

popcornjs