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

【问题标题】：Videogular - how to play given video file on div ng-click?Videogular - 如何在 div ng-click 上播放给定的视频文件？
【发布时间】：2015-05-05 17:24:45
【问题描述】：

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

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

请问我该怎么做？

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

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

但没有运气。

非常感谢您的任何建议。

【问题讨论】：

真的没人知道吗？
这里有一个完整的工作示例：videogular.com/examples/creating-a-simple-video-playlist
谢谢，但我认为，您提供的示例并未反映我所说的内容。我想让播放器全屏显示，以防万一用户点击了项目。是的，我可以使用 ng-show 在 div 中显示/隐藏播放器，但我想全屏运行单个实例。视频可以吗？

标签： angularjs html html5-video videogular

【解决方案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>

'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"
        }
      };
    }
  );

【讨论】：