我有一个用PhoneGap/Cordova(1.8.1,直到我敢升级到2.3.0)编写的应用程序,运行在iOS和黑莓上。
当我尝试启动视频播放时,应用程序切换到视频播放器的视频"page"div(我们使用JQuery和JQuery Mobile),并设置目标视频的URL。
播放器的目的是播放以前下载到本地文件系统的文件,但目前甚至不能播放从网络流媒体的东西。
我已经为视频播放器上的所有事件添加了监听器,我可以看到一个"loadstart"事件,然后什么也没有。
初始化如下:
HTML:<video id="video_player" class="video-js vjs-default-skin noscroll" controls preload="none">
JavaScript -初始化:
var DEFAULT_OPTIONS = { controls: true, autoplay: false, preload: "none", loop: false };
var videoPlayer = null;
try {
videoPlayer = _V_("video_player", DEFAULT_OPTIONS, function() {
log("Video ready");
});
} catch (error) {
dumpError("Problem with initialisation", error);
}
try {
log("DEBUG: Setting up video");
videoPlayer.addEvent("loadstart", function() {
try {
dumpArguments("loadstart", arguments);
} catch (error) {
dumpError("Failed to process loadstart", error);
}
});
videoPlayer.addEvent("loadedmetadata", function() {
try {
dumpArguments("loadedmetadata", arguments);
} catch (error) {
dumpError("Failed to process loadedmetadata", error);
}
});
videoPlayer.addEvent("loadeddata", function() {
try {
dumpArguments("loadeddata", arguments);
} catch (error) {
dumpError("Failed to process loadeddata", error);
}
});
videoPlayer.addEvent("loadedalldata", function() {
try {
dumpArguments("loadedalldata", arguments);
} catch (error) {
dumpError("Failed to process loadedalldata", error);
}
});
videoPlayer.addEvent("progress", function() {
try {
dumpArguments("progress", arguments);
} catch (error) {
dumpError("Failed to process progress", error);
}
});
videoPlayer.addEvent("error", function() {
try {
dumpArguments("error", arguments);
} catch (error) {
dumpError("Failed to process error", error);
}
});
} catch (error) {
dumpError("Error setting up video controller", error);
}
JavaScript -设置视频播放
APP.avPlayer.video.src(cachedFileRecord.URL);
APP.avPlayer。Video是在初始化结束时创建的视频播放器的全局引用。
偶尔视频会启动,这对会话很好,但重新启动应用程序,问题又出现了。
我是移动开发世界的新手,JavaScript(和iOS,和Cordova等…),但不是开发,我做的事情在错误的顺序,或者我与Java的长期历史导致我对JavaScript行为做出一个坏的假设?
对了,最后一个事实是,代码在黑莓上运行得很好,所以这肯定与iOS平台有关,但是5.1,6.0和6.1在模拟器和设备上都失败了。
我无法找到问题的根源,所以为了将来参考,如果其他人有这个问题,我通过动态构建一切来解决它,就像这样:
// Get the place we will mount the video
var home = $("#videoInsert");
// Remove previous player, TODO Release first
home.empty();
// Create the new content
var player = $('<video></video>');
var videoId = "video" + playerCounter++;
player.attr("id", videoId);
player.attr("class", "video-js vjs-default-skin noscroll");
player.attr("controls", "true");
player.attr("autoplay", "false");
player.attr("preload", "auto");
player.attr("data-setup", "{}");
// Add the optional poster if supplied
if (arguments.length > 2) {
player.attr("poster", posterUrl);
}
// Set the media up
var media = $("<source />");
media.attr("src", "file://" + videoUrl);
media.attr("type", mimeType);
player.append(media);
// Finally add the player to the page
home.append(player);
try {
target = _V_(videoId, null, function() {
log("Video ready");
attachEventListeners(this);
resize(this);
});
} catch (error) {
dumpError("Problem with initialisation", error);
}
看起来HTML和JS的初始化是冲突的,但是一个纯JS的初始化解决了这个问题。