Question

我尝试在我的角度项目中为popcorn.js添加一个简单的测试，但没有。

我正在使用ui-router。我在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示例。

当我查看该项目时，我收到了视频，但没有一个流行音乐！

任何帮助都会很棒。

认为角度必须有更好的东西...

更新：我的角度设置非常简单。无需显示我的索引，因为它只是引用了Popcorn.js的cdn，所有其他角度代码都运行正常。我上面显示的是我在＆＃34;视图＆＃34;中的代码。 =。

我的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

你是不是错过了这个：

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

在视频标签之后。

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

视频标签进入体内。

如视频中所述，脚本位于头部。

只需关注视频。

Popcorn.js无法在Angular.js中工作

1 个答案: