Android Phonegap播放视频/Phonegap添加插件
我刚刚开始使用phone gap,我遇到了一些问题。据我所知,最近有一些更新的电话差距,所以一些信息是有点过时。 我正在尝试播放MP4视频流 我已经在Windows7和LinuxUbuntu服务器上试过了。目前我正在Windows上使用Ubuntu14.04服务器和Bluestacks Android Emulator 我遵循了以下安装指南: 然后我创建了我的应用程序,如下所示:Android Phonegap播放视频/Phonegap添加插件,android,cordova,ubuntu,phonegap-plugins,phonegap-cli,Android,Cordova,Ubuntu,Phonegap Plugins,Phonegap Cli,我刚刚开始使用phone gap,我遇到了一些问题。据我所知,最近有一些更新的电话差距,所以一些信息是有点过时。 我正在尝试播放MP4视频流 我已经在Windows7和LinuxUbuntu服务器上试过了。目前我正在Windows上使用Ubuntu14.04服务器和Bluestacks Android Emulator 我遵循了以下安装指南: 然后我创建了我的应用程序,如下所示: cd /root phonegap create myapp cd myapp 然后,我尝试使用以下方式安装视频播
cd /root
phonegap create myapp
cd myapp
然后,我尝试使用以下方式安装视频播放器:
phonegap plugin add https://github.com/moust/cordova-plugin-videoplayer.git
这将在plugins目录中安装一些目录
然后,我将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>
音差
连接到设备我的应用程序
我的应用程序中的设备已准备就绪
app.initialize();
功能播放视频(vidUrl)
{
视频播放器(
维杜尔,
{
体积:0.5,,
//缩放模式:VideoPlayer.SCALING\u MODE.SCALE\u TO\u FIT\u WITH\u裁剪
},
函数(){
console.log(“视频完成”);
},
功能(err){
控制台日志(err);
}
);
}
每当我尝试单击播放视频链接时,我都可以在控制台中看到未定义的VideoPlayer。我正在使用Bluestack Android emulator上的phone gap应用程序访问该应用程序。但是,我已经使用jsconsole.com在代码中记录了问题,所以我也在头脑中记录了这个问题
<script src="http://jsconsole.com/remote.js?C2624EAC-3434-46D2-A3C5-C57D1C5584C8"></script>
我看不到关于安装插件的更多说明,似乎一个命令就足够了。许多人提到向config.xml文件添加功能。但是,我没有/res/xml/config.xml,在项目根目录中,我似乎只有一个www之外的配置文件
谁能给我指出正确的方向吗
更新
完整索引.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>
你好,世界
音差
连接到设备
设备已准备就绪
app.initialize();
函数init()
{
log(“试图显示uuid”);
var uuid=device.uuid;
log(“UUID是:”+UUID);
播放视频(“http://techslides.com/demos/sample-videos/small.mp4");
}
功能播放视频(URL)
{
视频播放器。播放(URL);
}
使用此插件播放视频。
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
<p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
<script src="js/video.js"></script>
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");
}
尝试从git链接下方安装。
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
<p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
<script src="js/video.js"></script>
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");
}
然后创建播放视频的功能。
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
<p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
<script src="js/video.js"></script>
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");
}
将此函数调用到按钮分区。
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
<p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
<script src="js/video.js"></script>
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试试看。
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
<p><a href="#" onclick="play_video('http://techslides.com/demos/sample-videos/small.mp4')">Play File Now</a><p/>
<script src="js/video.js"></script>
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");
}
在头标签完成之前添加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>
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
它在我的应用程序中对我很有效
希望这对您有所帮助。请注意,Phonegap已被弃用,您应该改用Cordova。你试过了吗?@OdedRegev是的,这就是我尝试使用的插件。我刚刚使用相同的命令快速设置,但使用cordova而不是phonegap,问题仍然存在。@TheHumbleRat您没有尝试过我在回答中建议的插件。我遵循了所有这些步骤,但我仍然发现VideoPlayer没有定义,这与我从原始帖子中得到的完全相同。你有我能看到的完整目录吗,因为我在结构上不是100。@TheHumbleRat没有你添加了js文件,这是我在帖子中提到的插件中给出的。我已经复制了
/root/phonegap/myapp/plugins/com.dawsonloudon.videoplayer/www/videoplayer.js
到/root/phonegap/myapp/www/js/videoplayer.js
。然后,我在cordova.js和index.js调用下添加了
。@Humblerat检查我编辑的答案替换你的js文件,我还对播放视频功能进行了更改。我已将/root/phonegap/myapp/www/js/VideoPlayer.js修改到上述文件中。我还将完整的index.html放在了更新后的问题中。我再一次没有得到定义。我已经设法添加了一个api插件,但设备etc之外的任何其他插件对我来说都不起作用。