Phonegap Play Video / Phonegap添加插件

Question

I have just started working with phone gap and I am experiencing some issues. 我刚开始处理手机间隙，但遇到一些问题。 As I understand there have been some recent updates to phone gap so some of the info is a bit out dated. 据我了解，电话间隙最近进行了一些更新，因此某些信息有些过时了。 I am trying to play an MP4 video stream. 我正在尝试播放MP4视频流。

I have tried this on both Windows 7 and Linux Ubuntu Server. 我已经在Windows 7和Linux Ubuntu Server上进行了尝试。 Currently I am working with Ubuntu 14.04 Server and Bluestacks Android Emulator on Windows. 目前，我正在使用Windows上的Ubuntu 14.04 Server和Bluestacks Android Emulator。

I followed the following install guide: http://dasunhegoda.com/installrun-phonegap-ubuntu/797/ 我遵循以下安装指南： http : //dasunhegoda.com/installrun-phonegap-ubuntu/797/

I then created my app like so: 然后，我像这样创建了我的应用程序：

cd /root
phonegap create myapp
cd myapp

I have then tried to install the video player using: 然后，我尝试使用以下方法安装视频播放器：

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

This install some directories in the plugins directory. 这将在plugins目录中安装一些目录。

I have then modified the index.html file of www to the following between the body tags 然后，我在主体标签之间将www的index.html文件修改为以下内容

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

Whenever I try to click the play video link I can see in the console VideoPlayer not defined. 每当我尝试单击播放视频链接时，都可以在控制台VideoPlayer中看到未定义的链接。 I am accessing the app using the phone gap app on my Bluestack Android emulator. 我正在使用Bluestack Android模拟器上的手机缺口应用程序访问该应用程序。 I have however, used jsconsole.com to log issues in the code, so I also have this in the head 但是，我已经使用jsconsole.com在代码中记录了问题，因此我也将其记在头

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

I cannot see further instruction regarding installing the plugin, it seems the one command should be sufficient. 我看不到有关安装插件的进一步说明，看来一个命令就足够了。 Many people mention adding features to the config.xml file. 许多人提到将功能添加到config.xml文件中。 I however do not have /res/xml/config.xml, I only seem to have one config file outside off www in the project root. 但是，我没有/res/xml/config.xml，我似乎只在项目根目录中的www之外有一个配置文件。

Can anyone point me in the right direction? 谁能指出我正确的方向？

Update 更新资料

Full index.html 完整的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>

Answer 1

Use this Plugin for Play Video. 使用此插件播放视频。

Try to install from below git link. 尝试从下面的git链接安装。

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

Then create function for Play Video. 然后创建播放视频功能。

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

Call this funciton to your button div. 将此函数称为按钮div。

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

Copy JS File from plugin folder to your JS folder. 将JS文件从插件文件夹复制到您的JS文件夹。

And modify in your Index.html. 并在您的Index.html中进行修改。

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

For reference you can check below link. 作为参考，您可以检查以下链接。

https://github.com/dawsonloudon/VideoPlayer https://github.com/dawsonloudon/VideoPlayer

Edit 1: 编辑1：

Modify your VideoPlayer.js file as below. 如下修改您的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");
}

Edit 2 编辑2

Modify your Index.html Give it a try. 修改您的Index.html试试看。

Add js file before head tag completion as below. 在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>

And also change play_video function as below. 并如下更改play_video函数。

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

It is working for me well in my app. 它在我的应用程序中对我来说运作良好。

Hope this will help you. 希望这会帮助你。

Phonegap Play Video / Phonegap添加插件

问题描述

1 个解决方案

解决方案1
0 2016-03-14 14:10:46

Phonegap Play Video / Phonegap添加插件

问题描述

1 个解决方案

解决方案1 0 2016-03-14 14:10:46

解决方案1
0 2016-03-14 14:10:46