Cordova - 如何全屏和循环播放 mp4 视频？答案

【问题标题】：Cordova - how to play mp4 video in fullscreen and in loop?Cordova - 如何全屏和循环播放 mp4 视频？
【发布时间】：2015-05-03 18:54:42
【问题描述】：

我想全屏和循环播放给定的 mp4 视频文件。

是否存在一些插件？

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

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

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

我可以轻而易举。我只需要在全屏和循环中播放即可关闭视频（无声音、在视频中搜索、时间线等）。

非常感谢您的建议。

【问题讨论】：

标签： android angularjs html cordova video

【解决方案1】：

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

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

您可以分叉 codepen 并添加循环功能。要进行全屏播放，您可以使用 API.toggleFullScreen() 将 ng-click 添加到 vg-overlay-play 插件。

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>

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

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

【讨论】：

谢谢，我从给定的链接中尝试了一些示例。它显示视频预览，点击视频后，视频仅在 iOS 上全屏播放（在 Android 4.4 上它仍然是非全屏窗口）。我想要一个带有文本的列表项，然后单击直接在展位平台上全屏运行视频。请问我该怎么做？
我绝对讨厌全屏 API，今天它确实有问题，即使在相同的操作系统但不同的手机中，它的行为也会有所不同。在 screenfull 中查看这个相关问题（这是激发 Videogular 全屏支持的库）github.com/sindresorhus/screenfull.js/issues/56
那么你有什么推荐给我的？在 iOS 上它工作正常，在 Android 上我的工作很奇怪，屏幕正对着全屏显示，但 admob 是可见的，并且视图的标题也是可见的。
您可以尝试禁用本机全屏并内联播放。您可以通过在 videogular 标签中添加属性 vg-plays-inline="config.playsInline" 来做到这一点。
你能看看这个话题吗？：stackoverflow.com/questions/28859270/…