2015-03-04 1 views
1

У меня есть список элементов, и я бы хотел, чтобы после ng-click на выбранном элементе воспроизведения видеофайлов с заданным URL-адресом.Videogular - как играть в данный видеофайл на div ng-click?

Это означает, что экземпляр игрока для просмотра должен быть скрыт, и после нажатия на элемент списка должен воспроизводиться данный видеофайл в полноэкранном режиме, в петле и без звуков.

Как я могу это сделать?

Я пытался сделать с помощью метода API.play() от:

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

Но без удачи.

Большое спасибо за любой совет.

+0

Действительно никто не знает? – redrom

+0

У вас есть полный рабочий пример здесь: http://www.videogular.com/examples/creating-a-simple-video-playlist/ – elecash

+0

Спасибо, но я думаю, этот пример, который вы предоставляете, не отражает то, о чем я говорил. Я хотел бы, чтобы игрок отображался в полноэкранном режиме только в том случае, если этот пользователь нажал на элемент. Да, я могу показать/скрыть игрока в div, используя ng-show, но я бы хотел запустить один экземпляр в полноэкранном режиме. Возможно ли это в видеогуляре? – redrom

ответ

2

Вы можете использовать метод 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" 
     } 
     }; 
    } 
);