0

我刚刚开始处理电话差距，我遇到了一些问题。据我了解，最近有一些关于电话差距的更新，所以有些信息有点过时了。我正在尝试播放 MP4 视频流。

我在 Windows 7 和 Linux Ubuntu Server 上都试过这个。目前我正在 Windows 上使用 Ubuntu 14.04 Server 和 Bluestacks Android Emulator。

我遵循以下安装指南：http ://dasunhegoda.com/installrun-phonegap-ubuntu/797/

然后我像这样创建了我的应用程序：

cd /root
phonegap create myapp
cd myapp

然后我尝试使用以下方法安装视频播放器：

phonegap plugin add https://github.com/moust/cordova-plugin-videoplayer.git

这会在插件目录中安装一些目录。

然后我将 www 的 index.html 文件修改为body标签之间的以下内容

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device MY APP</p>
            <p class="event received">Device is Ready MY APP</p>
             <p><a href="#" onclick="playVideo('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();

        function playVideo(vidUrl) 
        {
             VideoPlayer.play(
                    vidUrl,
                    {
                        volume: 0.5,
                        //scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT_WITH_CROPPING
                    },
                    function () {
                        console.log("video completed");
                    },
                    function (err) {
                        console.log(err);
                    }
                );
        }
    </script>
</body>

每当我尝试单击播放视频链接时，我都可以在控制台中看到未定义的 VideoPlayer。我正在使用 Bluestack Android 模拟器上的 phone gap 应用程序访问该应用程序。但是，我使用 jsconsole.com 在代码中记录问题，所以我也有这个

<script src="http://jsconsole.com/remote.js?C2624EAC-3434-46D2-A3C5-C57D1C5584C8"></script>

我看不到有关安装插件的进一步说明，似乎一个命令就足够了。许多人提到向 config.xml 文件添加功能。但是我没有/res/xml/config.xml，我似乎只有一个配置文件在项目根目录中的www之外。

谁能指出我正确的方向？

更新

完整的 index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <script src="http://jsconsole.com/remote.js?4AF41FCD-34CB-482B-ADD9-D966BB408076"></script>
   <!-- <script type="text/javascript" src="js/VideoPlayer.js"></script>-->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
        <p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <!--<script type="text/javascript" charset="utf-8" src="js/VideoPlayer.js"></script>-->


    <script type="text/javascript">
        app.initialize();

        function init()
        {
            console.log("Trying to show uuid");
            var uuid = device.uuid;

            console.log("UUID is: " + uuid);
            play_video("http://techslides.com/demos/sample-videos/small.mp4");

        }

        function play_video(URL)
        {
           VideoPlayer.play(URL);
        }

    </script>
</body>

4

1 回答 1

0

使用此插件播放视频。

尝试从下面的 git 链接安装。

cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git

然后为播放视频创建函数。

function play_video(URL) {
  if (URL != '') {
    setTimeout(function() {
      window.plugins.videoPlayer.play(URL);
    }, 1000);
  }
}

将此功能调用到您的按钮 div。

<p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>

将插件文件夹中的 JS 文件复制到您的 JS 文件夹中。

并在您的 Index.html 中进行修改。

<script src="js/video.js"></script>

作为参考，您可以查看以下链接。

https://github.com/dawsonloudon/VideoPlayer

编辑1：

如下修改您的 VideoPlayer.js 文件。

cordova.define("cordova/plugin/videoplayer",
  function(require, exports, module) {
    var exec = require("cordova/exec");
    var VideoPlayer = function () {};

    /**
     * Starts the video player intent
     *
     * @param url           The url to play
     */
    VideoPlayer.prototype.play = function(url) {
        exec(null, null, "VideoPlayer", "playVideo", [url]);
    };

    var videoPlayer = new VideoPlayer();
    module.exports = videoPlayer;
});

if (!window.plugins) {
    window.plugins = {};
}
if (!window.plugins.videoPlayer) {
    window.plugins.videoPlayer = cordova.require("cordova/plugin/videoplayer");
}

编辑 2

修改你的 Index.html 试试看。

在 head 标签完成之前添加 js 文件，如下所示。

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/VideoPlayer.js"></script>
    <title>Hello World</title>
</head>

并且还改变 play_video 功能如下。

function play_video(URL) {
  if (URL != '') {
    setTimeout(function() {
      window.plugins.videoPlayer.play(URL);
    }, 1000);
  }
}

它在我的应用程序中对我很有效。

希望这会帮助你。

于 2016-03-14T14:10:46.883 回答