I am trying to view a webpage offline. The page is profoundly simple. It has a javascript video player that is interacting with an HTML5 video element. The video element specifies a url for a video. So I am simply trying to get video playback in an offline saved version of the page.
I downloaded the page using Firefox, and I see that all assets are saved offline. I also setup a local web server to view the page as https://localhost/somepage.html.
In the HTML, the video player starts out as
<div class="jp-jplayer" id="jp_jplayer_1" style="width: 640px; height: 480px;">
<img id="jp_poster_1" src="http://localhost/files/vidtb.jpg" style="width: 640px; height: 480px; display: inline;">
<video id="jp_video_1" preload="none" style="width: 0px; height: 0px;">
<source src="http://localhost/files/vid.mp4" type="video/mp4">
</video>
</div>
In Chrome Developer Tools Console I don't see any errors.
After a number of jquery checks/manipulations, as well as some javascript from the application (all which is saved offline), the above HTML is changed to
<div class="jp-jplayer" id="jp_jplayer_0" style="width: 480px; height: 270px;">
<img id="jp_poster_0" style="width: 480px; height: 270px; display: none;">
<video id="jp_video_0" preload="none" style="width: 0px; height: 0px;">
</video>
</div>
Fun stuff.
So I have tried debugging, and it is very tough because in Chrome I can't even select the video source attribute to add a watch, because the minute I view in Inspector, the source element has been removed.
I set some breakpoints and found that in this function:
$(".player.video").each(function (t, e) {
var n = $(e), i = parseInt(get_html_attribute(n, "width")) || 480, o = parseInt(get_html_attribute(n, "height")) || 270, a = get_html_attribute(n, "source"), r = get_html_attribute(n, "poster"), s = get_html_attribute(n, "caption"), l = n.parents("component").first().hasClass("float-center"), c = {
play_top: (o - 60) / 2,
height: o,
width: i
}, u = "true" === get_html_attribute(n, "fullscreen");
l ? c.play_left = 27 : c.play_left = (i - 60) / 2, n.html(bm.render_template("media", "video", c));
var d = {poster: r, m4v: a};
s && (d.track = s), u && (d.allowFullScreen = !0), n.find(".jp-jplayer").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", d)
},
play: function () {
$(this).jPlayer("pauseOthers")
},
solution: "flash, html",
supplied: "m4v",
swfPath: "/lib",
cssSelectorAncestor: "#" + e.id,
size: {width: i + "px", height: o + "px", cssClass: ""},
nativeVideoControls: {
msie: /msie [0-6]/,
ipad: /ipad.*?os [0-4]/,
iphone: /iphone/,
ipod: /ipod/,
android_pad: /android [0-3](?!.*?mobile)/,
android_phone: /android.*?mobile/,
blackberry: /blackberry/,
windows_ce: /windows ce/,
webos: /webos/
}
}).bind($.jPlayer.event.play, function () {
$(this).jPlayer("pauseOthers")
})
})
the video source ends up being removed, but it is not unclear where and why.
I think what is happening, is the application assumes there are some needed ajax calls, and that the video is being accessed via CORS credentials. Or maybe something to do with headers and the javascript looking for headers that it expects from on online browser, or looking for various server response headers. But since I have downloaded the video, I have no need for AJAX calls, credential checking, etc, etc. Basically, I need to remove whatever application/jquery functionality is causing this. If I remove scripts altogether that doesn't get me anywhere since the video playback is done so via the scripts.
So... what would you do? How would you go about tracking down the parts of the code that are causing this? Does this issue immediately lead you to think of some typical culprit that I could check?
Thanks, and sorry I can't be more precise about the problem. I am a guitarist who knows some coding, but trying to unravel this issue (among 1000's of lies of javascript) is beyond my coding experience. I can fix things once I know the issue, but it is the troubleshooting stage that is proving to be insane.
Regards
