解决krpano全景视频在QQ浏览器、安卓不能正常播放的问题
全景视频
可以720度随意拖动观看的VR全景视频，是静态全景展示的升级版，也是3DVR全景技术的发展和延伸。震撼的视听体验，生动的视频展示能够让用户更全面、更详细、更直观的了解商家、企业的内容信息。
对比静态全景展示
区别于单一的静态全景展示形式，VR全景视频更加生动，包含信息量更丰富，能够精准的呈现出场景事物的多维形态，用户能够更加直观的获取信息内容。
问题解决：
一、更改videopano文件的plugin
<plugin name="video" url.no-ios.and.html5="%SWFPATH%/plugins/myvideoplayer.js" url.ios.and.html5="%SWFPATH%/plugins/videoplayer.js" url.flash="%SWFPATH%/plugins/videoplayer.swf" pausedonstart="true" loop="true" volume="1.0" onloaded="add_video_sources();" />
二、把myvideoplayer.js放入项目目录
var krpanoplugin = function() {
function R(a) {
return "boolean" == typeof a ? a : 0 <= "yesontrue1".indexOf(String(a).toLowerCase())
}
function d(a, b, d, r, f) {
3 == a || 4 == a || 5 == a ? c[b] = d : c.registerattribute(b, d, r, f);
I.push(b)
}
function l(a, c, b, d) {
a.addEventListener(c, b, d);
J.push({
obj: a,
eventname: c,
callback: b,
capture: d
})
}
function D(a) {
var c, b = J.length,
d;
for (c = 0; c < b; c++) if (d = J[c], null == a || d.obj === a) d.obj.removeEventListener(d.eventname, d.callback, d.capture), J.splice(c, 1), c--, b--
}
function la() {
function a(a) {
p = !0;
0 < n && (q.seek(n), n = -1)
}
function d(a) {
f && e && (S(e.src + " - loading failed"), e = null)
}
function g(a) {
0 == x && (y(), q.paused = u = !0, E(null), 0 == c.iscomplete && (c.iscomplete = !0, h.call(c.onvideocomplete, c)))
}
function r() {
if (f && b && !(2 > b.readyState)) {
var a = h.timertick,
d = 0,
v = Number(b.duration);
isNaN(v) || 0 >= v || (e ? (u && !e.paused ? e.pause() : !u && e.paused && e.play(), d = e.currentTime) : u ? d = w : (0 == z && (z = a), d = w + F * Math.max(0, (a - z) / 1E3)), d >= v - .02 ? (d = v, x ? (w = 0, z = a + .1, e && (e.currentTime = 0)) : (y(), q.paused = u = !0, E(null), 0 == c.iscomplete && (c.iscomplete = !0, h.call(c.onvideocomplete, c)))) : c.iscomplete = !1, A = d, .01 < Math.abs(b.currentTime - A) && (b.currentTime = Number(A.toFixed(2))), b.autoplay = !0)
}
}
var q = this,
u = q.paused = !0,
m = null,
e = null,
k = null,
p = !1,
n = -1,
z = 0,
w = 0;
(function() {
if (!0 !== window.krpanoHideiPhoneMediaControlsStyle) {
window.krpanoHideiPhoneMediaControlsStyle = !0;
var a = document.createElement("style");
a.type = "text/css";
a.innerHTML = "*::-webkit-media-controls-panel{display: none!important;-webkit-appearance:none;} *::--webkit-media-controls-play-button{display: none!important;-webkit-appearance:none;} *::-webkit-media-controls-start-playback-button{display: none!important;-webkit-appearance:none;}";
document.getElementsByTagName("head")[0].appendChild(a)
}
})();
q.start = function() {
c.iPhoneMode = !0;
b.autoplay = !0;
b.pause();
b.style.webkitMediaControls = !1;
var f = X(c.videourl, ["m4a", "mp3"]),
f = h.parsePath(f);
n = -1;
f ? (null == e && (k ? (e = k, k = null) : e = document.createElement("audio")), D(e), l(e, "canplay", a, !0), l(e, "error", d, !0), l(e, "ended", g, !0), e.loop = x, p = e.autoplay = !1, e.src = f, e.load(), e.pause()) : e && (e.src && (e.pause(), k = e), e = null);
z = w = 0;
u = c.pausedonstart;
q.paused = u;
m = setInterval(r, 1E3 / 60);
b.currentTime = 0
};
q.play_audio = function() {
e && e.play()
};
q.play = function() {
1 == u && (u = q.paused = !1, c.iscomplete ? (c.iscomplete = !1, w = 0, e && (e.currentTime = 0)) : w = b.currentTime, z = h.timertick + .1, e && e.play(), E(null))
};
q.pause = function() {
0 == u && (e && e.pause(), w = b.currentTime, u = q.paused = !0, E(null))
};
q.seek = function(a) {
e ? p ? (e.currentTime = a, n = -1) : n = a : (n = -1, z = 0, w = a)
};
q.remove = function() {
m && (clearInterval(m), m = null);
e && (e.src && (e.pause(), k = e), e = null)
};
q.setplaybackrate = function(a) {
if (e) try {
e.playbackRate = a
} catch (c) {}
};
q.setloop = function(a) {
e && (e.loop = a)
};
q.need_touchstart_play = function() {
return null != e && e.paused
};
q.try_touchstart_play = function() {
return e ? (e.play(), 0 == e.paused) : !0
}
}
function S(a) {
var b = c ? c.onerror : null;
null != b && "" != b && "null" != ("" + b).toLowerCase() ? (c.videoerror = a, h.call(b, c)) : h.trace(3, a + "!")
}
function Y(a) {
a = a.style;
a.pointerEvents = "none";
a.position = "absolute";
a.width = "100%";
a.height = "100%";
a.left = 0;
a.top = 0;
a.opacity = 1;
a.backgroundColor = "transparent";
a[G] = "translateZ(0)";
a[G + "Origin"] = "0 0"
}
function createVideo() {
var a = null,
a = document.createElement("video");
if (!a || !a.play) return null;
Y(a);
return a
}
function T(a) {
c && (a = document.visibilityState, !0 === document.hidden || "hidden" == a || "prerender" == a || "unloaded" == a ? 0 == c.ispaused && c.autopause && 0 == c.isautopaused && (c.isautopaused = !0, y()) : c.autoresume && c.isautopaused && (c.isautopaused = !1, K()))
}
function aa(a, b) {
c.registercontentsize(a, b);
c.forceresize = !0;
c.videowidth = a;
c.videoheight = b;
c.havevideosize = !0;
// h.trace(2, "aa");
c.isvideoready = !0;
if (c.onvideoreadyCB) c.onvideoreadyCB();
h.call(c.onvideoready, c)
}
function X(a, b) {
B = null;
var d = ("" + a).split("|");
if (1 < d.length || b) {
var f = p;
b && (f = b);
var g = f.length,
l = d.length,
h, e, k = [];
for (h = 0; h < l; h++) if (e = d[h]) {
var m = e;
if (0 != e.indexOf("rtmp:")) {
var n = e.indexOf("?");
0 < n && (e = e.slice(0, n));
n = e.indexOf("#");
0 < n && (e = e.slice(0, n));
n = e.lastIndexOf(".");
if (1 < n) for (n = ("" + e.slice(n + 1)).toLowerCase(), e = 0; e < g; e++) if (n == f[e]) {
if (b) return m;
k.push({
type: n,
inorder: h,
url: m,
used: !1
});
break
}
}
}
if (b) return null;
if (0 < k.length) return "" != c.preferredformat && k.sort(function(a, b) {
var d = a.type,
e = b.type,
f = "m3u" == d || "m3u8" == d ? 0 : "mp4" == d || "m4v" == d ? 1 : "webm" == d ? 2 : 3,
v = "m3u" == e || "m3u8" == e ? 0 : "mp4" == e || "m4v" == e ? 1 : "webm" == e ? 2 : 3,
g = ("" + c.preferredformat).toLowerCase();
"" != g && (d == g && (f = -1), e == g && (v = -1));
return f > v ? 1 : f < v ? -1 : a.inorder > b.inorder ? 1 : a.inorder < b.inorder ? -1 : 0
}), B = k, ba()
}
return a
}
function ba() {
if (B) {
var a, b;
b = B.length;
for (a = 0; a < b; a++) if (0 == B[a].used) return B[a].used = !0, B[a].url
}
return null
}
function U(a, b) {
var c = !0;
if (!m.android || !m.chrome) {
var d = b.indexOf("://");
if (0 < d) {
var f = document.domain,
d = b.slice(d + 3, b.indexOf("/", d + 3));
f == d && (c = !1)
}
}
c && ((c = h.security.cors) && "" != c || (c = "anonymous"), a.crossOrigin = c)
}
function ca(a, d, k, r) {
c.videourl = void 0 === a || null == a || "" == a || "null" == ("" + a).toLowerCase() ? null : a;
c.posterurl = void 0 === d || null == d || "" == d || "null" == ("" + d).toLowerCase() ? null : d;
c.pausedonstart = R(k);
r = Number(r);
if (isNaN(r) || 0 > r) r = 0;
A = r;
H = 0 < r ? r : -1;
a = X(c.videourl);
C = a = h.parsePath(a);
// h.trace(2, "ca");
c.isvideoready = !1;
c.havevideosize = !1;
c.isautopaused = !1;
c.isseeking = 0 < H && null == f;
c.iscomplete = !1;
c.ispaused = !0;
c.loadedbytes = 0;
c.totalbytes = 0;
c.totaltime = 0;
c.videoerror = "";
// a 涓鸿棰戝湴鍧€
if(null != a){
if(b && b.src){
f ? f.pause() : b.pause()
}else{
null == b && (b = createVideo(), c.videoDOM = b)
}
if(c.posterurl && (c.pausedonstart || m.mobile || m.tablet)){
if(null == g){
g = document.createElement("img")
l(g, "error", ma, !1)
l(g, "load", na, !1)
}
a = c.posterurl
V = a = h.parsePath(a)
U(g, a)
g.src = a
}else{
da()
}
}
}
function ma(a) {
b && S(V + " - loading failed")
}
function na(a) {
if (b) {
a = g.naturalWidth;
var d = g.naturalHeight;
Y(g);
c.sprite && (c.sprite.appendChild(g), Array.prototype.indexOf.call(g.parentNode.children, g));
c.posterDOM = g;
aa(a, d);
da()
}
}
function da() {
D(b);
t && (clearInterval(t), t = null);
f && f.remove();
l(b, "loadedmetadata", k, !1);
l(b, "loadeddata", k, !1);
l(b, "canplay", k, !1);
l(b, "canplaythrough", k, !1);
l(b, "play", k, !1);
l(b, "pause", k, !1);
l(b, "playing", k, !1);
l(b, "seeking", k, !1);
l(b, "waiting", k, !1);
l(b, "seeked", k, !1);
l(b, "stalled", k, !1);
l(b, "suspend", k, !1);
l(b, "ended", k, !1);
l(b, "timeupdate", k, !1);
l(b, "progress", L, !1);
m.ios && (t = setInterval(L, 500));
l(b, "error", oa, !1);
b.loop = c.loop;
b.autoplay = c.pausedonstart ? !1 : !0;
b.preload = c.html5preload;
b.controls = c.html5controls;
b.setAttribute("playsinline", "");
b.setAttribute("webkit-playsinline", "");
b.setAttribute('x5-video-player-type', 'h5')
ea(M);
fa(N);
ga(F);
ha(O);
U(b, C);
b.src = C;
b.load();
f ? f.start() : c.pausedonstart ? b.pause() : b.play()
}
function oa(a) {
if (b) {
a = null;
a = b.error ? b.error.code : 0;
if (3 <= a) {
var c = ba();
if (c) {
C = a = h.parsePath(c);
U(b, C);
b.src = C;
b.load();
return
}
}
switch (a) {
case 1:
a = "video loading aborted";
break;
case 2:
a = "network loading error";
break;
case 3:
a = "video decoding failed (corrupted data or unsupported codec)";
break;
case 4:
a = "loading video failed";
break;
default:
a = "unknown error"
}
a && S(C + " - " + a)
}
}
function L(a) {
null != t && a && "progress" == a.type && (clearInterval(t), t = null);
if (b && b.buffered) {
var d, f;
d = b.buffered.length;
f = b.duration;
if (0 < f && (c.totaltime = f, 0 < d)) {
var g = 0;
for (a = 0; a < d; a++) {
var h = b.buffered.end(a);
h > g && (g = h)
}
c.loadedbytes = 1048576 * g | 0;
c.totalbytes = 1048576 * f | 0
}
}
}
function k(a) {
// h.trace(0, a.type)
if (b) switch (a.type) {
case "loadedmetadata":
case "loadeddata":
// h.trace(2, "loadeddata")
0 < H && (P(H), H = -1);
L();
a = b.videoWidth;
var d = b.videoHeight;
0 == c.havevideosize && 0 < a && 0 < d && aa(a, d);
if(! (a > 0)){
setTimeout(function(){
k({type: 'loadedmetadata'})
}, 100)
}
break;
case "canplay":
case "canplaythrough":
L();
null == f ? 0 == c.pausedonstart && b.paused && (b.play(), W()) : 0 == c.pausedonstart && f.need_touchstart_play() && (f.play_audio(), W());
break;
case "seeking":
case "seeked":
c.isseeking = f ? !1 : "seeking" == a.type;
case "play":
case "pause":
case "playing":
case "waiting":
case "stalled":
case "suspend":
case "ended":
case "timeupdate":
E(a)
}
}
function E(a) {
a = !1;
g && 2 <= b.readyState && (0 == b.paused || f && 0 == f.paused) && (a = !0, m.chromemobile && 0 == b.currentTime && (a = !1));
a && (D(g), g.parentNode && g.parentNode.removeChild(g), g = V = c.posterDOM = null);
c.isvideoready && (a = f ? f : b, c.ispaused != a.paused && (0 == a.paused ? (c.ispaused = !1, h.call(c.onvideoplay, c)) : (c.ispaused = !0, h.call(c.onvideopaused, c))), null == f && c.iscomplete != b.ended && (1 == b.ended ? (y(), 0 == c.iscomplete && (c.iscomplete = !0, h.call(c.onvideocomplete, c))) : c.iscomplete = !1))
}
function W() {
m.touch && (b.paused && !f || f && f.need_touchstart_play()) && 0 == Q && (Q = !0, c.touchworkarounds && (l(document.body, "touchstart", ia, !0), l(document.body, "touchend", ia, !0)), c.needtouch = !0, h.call(c.onneedtouch, c))
}
function ja() {
Q && (Q = !1, D(document.body), c.needtouch = !1, h.call(c.ongottouch, c))
}
function ia(a) {
b && (a = !1, f ? a = f.try_touchstart_play() : (b.play(), a = 0 == b.paused), a && ja())
}
function pa(a) {
x = R(a);
b && (b.loop = x);
f && f.setloop(a)
}
function qa() {
return x
}
function ra(a) {
P(a)
}
function sa() {
if (b) {
var a = Number(b.currentTime);
if (!isNaN(a)) return a
}
return A
}
function ea(a) {
a = Number(a);
isNaN(a) ? a = 1 : 0 > a ? a = 0 : 1 < a && (a = 1);
M = a;
b && (b.volume = a)
}
function ta() {
return M
}
function fa(a) {
N = a;
b && (b.muted = a)
}
function ua() {
return N
}
function ga(a) {
a = Number(a);
if (isNaN(a) || 0 == a) a = 1;
F = a;
if (b) try {
b.playbackRate = a
} catch (c) {}
f && f.setplaybackrate(a)
}
function va() {
return F
}
function ha(a) {
O = a = R(a);
b && m.safari && (b.airplay = b["x-webkit-airplay"] = a ? "allow" : "disallow")
}
function wa() {
return O
}
function K() {
f ? f.play() : b && b.play();
c.pausedonstart = !1;
W()
}
function y() {
f ? f.pause() : b && b.pause();
c.pausedonstart = !0;
ja()
}
function xa() {
b && (0 == b.paused || f && 0 == f.paused ? y() : K())
}
function P(a) {
if (b && b.src) {
var c = 0,
c = 0 < ("" + a).indexOf("%") && 0 < b.duration ? parseFloat(a) / 100 * b.duration : Number(a);
isNaN(c) || (f ? f.seek(c) : b.currentTime = c)
}
}
function ya() {
P(0);
y()
}
function ka() {
// h.trace(2, "ka")
b && (b.pause(), f && f.remove(), D(b), g && g.parentNode && g.parentNode.removeChild(g), b && b.parentNode && b.parentNode.removeChild(b), c.videoDOM = null, c.posterDOM = null, c.iPhoneMode = !1, b = g = null, c.videourl = null, c.isvideoready = !1, c.ispaused = !0, c.iscomplete = !1, c.isseeking = !1, c.isautopaused = !1, c.havevideosize = !1, c.videowidth = 0, c.videoheight = 0, c.loadedbytes = 0, c.totalbytes = 0, c.totaltime = 0, c.videoerror = "", A = 0)
}
this.name = "Videoplayer";
this.version = "1.19-pr7";
this.build = "2016-09-09";
var h = null, // krpanointerface
m = null, // krpanointerface.devices
c = null, // video瀵硅薄
b = null,
g = null,
V = null,
C = null,
B = null,
p = [],
G = "transform",
f = null,
H = -1,
Q = !1,
t = null,
x = !1,
M = 1,
N = !1,
F = 1,
O = !1,
A = 0,
I = [],
J = [];
// krpanointerface, pluginpath, pluginobject
this.registerplugin = function(krpanointerface, pluginpath, pluginobject) {
h = krpanointerface;
m = h.device;
c = pluginobject;
if("1.19" > h.version || "2015-03-01" > h.build){
h.trace(3, "Videoplayer plugin - too old krpano version (min. 1.19)")
}else{
G = h.browser.css.transform
if(b = createVideo()){
if(void 0 !== b.canPlayType){
//鏀寔canPlayType鍒ゆ柇鍙挱鏀炬牸寮�
(b.canPlayType("video/mp4").match(/maybe|probably/i) && (p.push("mp4"), p.push("m4v"), p.push("mov"), p.push("3gp")), b.canPlayType("video/webm").match(/maybe|probably/i) && p.push("webm"), b.canPlayType("video/ogg").match(/maybe|probably/i) && (p.push("ogg"), p.push("ogv")), b.canPlayType("video/hls").match(/maybe|probably/i) && (p.push("m3u"), p.push("m3u8")))
}else{
// 榛樿鍏佽mp4鍜宮ov
(p.push("mp4"), p.push("mov"))
}
d(0, "videourl", null)
d(0, "altvideourl", null)
d(0, "posterurl", null)
d(0, "panovideo", !1)
d(0, "use_as_videopano", !1)
d(0, "pausedonstart", !1)
d(0, "autopause", !0)
d(0, "autoresume", !1)
d(0, "preferredformat", "")
d(0, "iphoneworkarounds", !0)
d(0, "touchworkarounds", !0)
d(0, "html5controls", !1)
d(0, "html5preload", "auto")
d(1, "loop", x, pa, qa)
d(1, "time", A, ra, sa)
d(1, "volume", M, ea, ta)
d(1, "muted", N, fa, ua)
d(1, "playbackrate", F, ga, va)
d(1, "airplay", O, ha, wa)
d(2, "onvideoready", null)
d(2, "onvideoplay", null)
d(2, "onvideopaused", null)
d(2, "onvideocomplete", null)
d(2, "onerror", null)
d(2, "onneedtouch", null)
d(2, "ongottouch", null)
d(3, "playvideo", ca)
d(3, "play", K)
d(3, "resume", K)
d(3, "pause", y)
d(3, "togglepause", xa)
d(3, "seek", P)
d(3, "stop", ya)
d(3, "closevideo", ka)
d(4, "isvideoready", !1)
d(4, "iswaiting", !1)
d(4, "ispaused", !0)
d(4, "iscomplete", !1)
d(4, "isseeking", !1)
d(4, "isautopaused", !1)
d(4, "havevideosize", !1)
d(4, "needtouch", !1)
d(4, "videowidth", 0)
d(4, "videoheight", 0)
d(4, "loadedbytes", 0)
d(4, "totalbytes", 0)
d(4, "totaltime", 0)
d(4, "videoerror", "")
d(5, "videoDOM", b)
d(5, "posterDOM", g)
d(5, "iPhoneMode", !1)
l(window, "pagehide", T, !1)
l(window, "pageshow", T, !1)
l(document, "visibilitychange", T, !1)
a = m.ios && 10 <= m.iosversion
m.iphone && 1 == c.iphoneworkarounds && 0 == a && (f = new la)
c.sprite && (0 == c.use_as_videopano && 0 == c.panovideo || !m.panovideosupport) && !0 !== c.renderToBitmap && (c.sprite.appendChild(b), Array.prototype.indexOf.call(b.parentNode.children, b))
ca(c.altvideourl ? c.altvideourl : c.videourl, c.posterurl, c.pausedonstart, c.time)
}else{
h.trace(2, "Videoplayer plugin - HTML5 video is not supported by this browser!")
}
var canvas = document.getElementById("krpanoSWFObject").getElementsByTagName('canvas')[0];
canvas.onresize = function(event){
var intvalListener = setInterval(function(){
if(canvas.parentElement.parentElement.parentElement.style.width == '100%'){
clearInterval(intvalListener);
}
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.parentElement.parentElement.style.width = '100%';
canvas.parentElement.parentElement.style.height = '100%';
canvas.parentElement.parentElement.parentElement.style.width = '100%';
canvas.parentElement.parentElement.parentElement.style.height = '100%';
},50);
}
}
};
this.unloadplugin = function() {
ka();
var a, b = I.length;
for (a = 0; a < b; a++) delete c[I[a]];
I = null;
D(null);
t && (clearInterval(t), t = null);
h = m = c = null
};
this.onresize = function(a, d) {
if (b && c && !0 !== c.renderToBitmap) {
var f = b.videoWidth,
l = b.videoHeight;
if (0 < f && 0 < l) {
var k = f + "px",
m = l + "px",
p = "hotspot" == c._type && c.distorted ? 1 : h.stagescale,
f = "translateZ(0) scale(" + a * p / f + "," + d * p / l + ")";
g && (k != g.style.width && (g.style.width = k), m != g.style.width && (g.style.height = m), g.style[G] = f);
k != b.style.width && (b.style.width = k);
m != b.style.height && (b.style.height = m);
b.style[G] = f
}
}
return !1
}
};
