Videogular - 怎么玩就DIV给视频文件NG-点击? [英] Videogular - how to play given video file on div ng-click?

查看:241
本文介绍了Videogular - 怎么玩就DIV给视频文件NG-点击?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个项目清单,并愿与给定的URL所选项目发挥的录像档案后的NG-点击。

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?

我试图通过API.play()方法,从做:

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

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

但是,如果没有运气。

任何意见非常感谢。

推荐答案

您可以使用 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"
        }
      };
    }
  );

这篇关于Videogular - 怎么玩就DIV给视频文件NG-点击?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆