Video.js Stalling during file load on iOS

问题:

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

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.

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

The initialisation is as follows:

HTML:

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

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 - Setup video for playback

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

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.

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?

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.

回答1:

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);
    }

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