2

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.

redrom
  • 11,502
  • 31
  • 157
  • 264
  • Really Nobody knows? – redrom Mar 04 '15 at 20:55
  • You have a full working example here: http://www.videogular.com/examples/creating-a-simple-video-playlist/ – elecash Mar 05 '15 at 12:29
  • Thanks, but i think, that example you provide is not reflecting what i talked about. I would like to have player displayed in fullscreen only in case, that user clicked on item. Yes i can show/ hide player in div using ng-show but i would like to run single instance in fullscreen. Is it possible in videogular? – redrom Mar 05 '15 at 12:49

1 Answers1

2

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"
        }
      };
    }
  );
elecash
  • 925
  • 7
  • 11