Question

我刚开始处理手机缺口，我遇到了一些问题。据我所知，手机缺口最近有一些更新，所以有些信息有点过时了。我正在尝试播放MP4视频流。

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

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

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

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

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

<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>

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

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

每当我尝试点击播放视频链接时，我都可以在控制台中看到未定义的VideoPlayer。我正在使用Bluestack Android模拟器上的手机间隙应用访问该应用。但是，我使用jsconsole.com来记录代码中的问题，所以我也在头脑中

<!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>

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

有人能指出我正确的方向吗？

更新

完整index.html

{{1}}

Answer 1

将此插件用于播放视频。

尝试从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试一试。

在头标记完成之前添加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);
  }
}

我的应用程序对我很有用。

希望这会对你有所帮助。

Phonegap播放视频/ Phonegap添加插件

1 个答案: