【问题标题】: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>
    

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

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

    【讨论】:

    • 谢谢,我从给定的链接中尝试了一些示例。它显示视频预览,点击视频后,视频仅在 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/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-11
    相关资源
    最近更新 更多