Video.js在iOS上的文件加载期间停顿 [英] Video.js Stalling during file load on iOS

问题描述

我有一个应用程序用PhoneGap / Cordova（1.8.1，直到我敢升级到2.3.0）在iOS和Blackberry上运行。

I have an app written in PhoneGap/Cordova (1.8.1 until I dare upgrade to 2.3.0) running on iOS and Blackberry.

启动视频播放，应用程序切换到视频播放器（我们使用JQuery和JQuery Mobile）的视频页面div，并设置目标视频的网址。

When I try to launch video playback, the app switches to the video "page" div with the video player (We're using JQuery and JQuery Mobile) and sets the URL for the target video.

播放器用于播放以前下载到本地文件系统的文件，但目前不会播放从网络流式传输的内容。

The player is meant to play files previously downloaded to the local file system, but currently won't even play things streamed from the web.

我添加了监听器对于视频播放器上的所有事件，我可以看到一个单一的loadstart事件，然后什么也不会。

I've added listeners for all the events on the video player, and I can see a single "loadstart" event, and then nothing.

初始化如下：

HTML ：

<video id="video_player" class="video-js vjs-default-skin noscroll" controls preload="none">

JavaScript - 初始化：

JavaScript - Initialisation:

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 - 设置视频播放 >

JavaScript - Setup video for playback

APP.avPlayer.video.src(cachedFileRecord.URL);

APP.avPlayer.video是视频播放器在初始化结束时创建的全局引用

APP.avPlayer.video is the global reference for the video player the is created at the end of initialisation.

有时视频会启动，对于该会话很有用，但重新启动应用程序，问题再次出现。

Occasionally the video will start up, and will be good for that session, but restart the app, and the problem recurs.

我是移动开发领域的新手，JavaScript（和iOS和Cordova等...），但不是开发，我是以错误的顺序做事，还是我的漫长的历史与Java导致我做一个坏的假设与JavaScript的行为？

I'm new to the world of mobile development, and JavaScript (and iOS, and Cordova, etc...) but not to development, am I doing something in the wrong order, or is my long history with Java causing me to make a bad assumption with JavaScript behaviour?

哦，最后一个事实为后代，代码工作正常在黑莓，所以这绝对是相关的到iOS平台，但是5.1,6.0和6.1都在模拟器和设备上失败。

Oh and one last fact for posterity, the code works just fine on BlackBerry, so this is definitely something related to the iOS platform, but 5.1, 6.0 and 6.1 all fail in the simulator and on devices.

推荐答案

到底部的问题，所以为了未来的参考，如果任何人有这个问题，我解决它通过动态构造一切如此：

I was unable to get to the bottom of the problem, so for future reference if anyone else has this problem, I solved it by constructing everything dynamically like so:

    // 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 init解决了这个问题。

It seems that something about the HTML and JS initialisations was conflicting, but a pure JS init solved the problem.

这篇关于Video.js在iOS上的文件加载期间停顿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！