Videogular - how to play given video file on div n

Question

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.

Answer 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>

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