angularjs - Videogular - 如何在 div ng-click 上播放给定的视频文件？

Question

我有一个项目列表，并希望在 ng-click 后单击所选项目播放具有给定 URL 的视频文件。

这意味着视图的播放器实例应该被隐藏，并且在单击列表项后应该以全屏、循环且没有声音的方式播放给定的视频文件。

请问我该怎么做？

我试图通过 API.play() 方法从：

http://www.videogular.com/tutorials/videogular-api/

但没有运气。

非常感谢您的任何建议。

Answer 1

你可以使用API.toggleFullScreen()方法。

HTML

<div ng-controller="HomeCtrl as controller" class="videogular-container">
  <videogular vg-player-ready="controller.onPlayerReady($API)" vg-theme="controller.config.theme.url">
    <vg-media vg-src="controller.config.sources"
          vg-native-controls="true">
    </vg-media>
  </videogular>

  <div ng-click="controller.API.toggleFullScreen()">open in fullscreen</div>
</div>

JS

'use strict';
angular.module('myApp',
    [
      "ngSanitize",
      "com.2fdevs.videogular"
    ]
  )
  .controller('HomeCtrl',
    function ($sce) {

      this.onPlayerReady = function onPlayerReady(API) {
          this.API = API;
      };

      this.config = {
        preload: "none",
        sources: [
          {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
          {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
          {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
        ],
        theme: {
          url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
        }
      };
    }
  );