科尔多瓦 - 如何全屏和循环播放mp4视频?

时间:2015-03-03 07:38:41

标签: android angularjs html5 cordova video

我想在全屏和循环播放mp4视频文件。

现有一些插件吗?

我找到了基于Angular的应用程序的视频库。

http://www.videogular.com/docs/#/api/com.2fdevs.videogular.directive:vgLoop

但我不知道这是我需要的正确选择。

我可以成为轻量级的东西。我只需要在全屏和循环播放就有可能关闭视频(没有声音,在视频,时间线等方面寻找......)。

非常感谢您的任何建议。

1 个答案:

答案 0 :(得分:2)

使用Videogular,您可以满足所有这些要求。可能你需要一些非常基本的东西:

http://www.videogular.com/examples/simplest-videogular-player/

您可以分叉代码集并添加循环功能。要进行全屏播放,您可以使用API​​.toggleFullScreen()向vg-overlay-play插件添加ng-click。例如。

HTML

<div ng-controller="myController as ctrl">
    <videogular vg-player-ready="onPlayerReady($API)" vg-loop="ctrl.config.loop">
        <vg-media vg-src="ctrl.config.sources"></vg-media>
        <vg-overlay-play ng-click="API.toggleFullScreen()"><vg-overlay-play>
    </videogular>
</div>

JS

angular.module("myApp").controller("myController", 
    function myController($sce) {
        this.API = null;

        this.config = {
            loop: true,
            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"}
            ]
        };

        this.onPlayerReady = function onPlayerReady(API) {
            this.API = API;
        };
    }
);

我没有对此进行测试,但它应该可以正常工作或接近。