Videogular - how to play given video file on div ng-click?

问题

I have a list of items and and would like to after the ng-click on selected item play videofile with given URL.

It means that player instance for view should be hidden and after the click on the list item should be played given video file in fullscreen, loop and without sounds.

How can i do it please?

I tried to to do via API.play() method from:

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

But without the luck.

Many thanks for any advice.

回答1:

You can use API.toggleFullScreen() method.

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

来源：https://stackoverflow.com/questions/28859270/videogular-how-to-play-given-video-file-on-div-ng-click

标签

angularjs

html5

html5-video

videogular