视频无法恢复/跳跃及时无法正常工作

时间:2014-06-25 23:59:55

标签: javascript html5 video

关于视频编码的另一个问题。

所以我一直在尝试使用我的网络应用程序中的视频,到目前为止一直很好。 但问题出在这里,我播放的视频是本地文件。每当我暂停视频或跳转到特定时间时,视频播放器都会自行禁用。 它只有在我点击“播放”时才有效。再次,这导致视频重新加载#39;然后,当我点击“玩”#39;再次,视频从头开始。

这很烦人,我不知道造成这种情况的原因是什么。这是否与Chrome有关,因为Firefox不会以这种方式出错,恢复工作完美等等。

以下代码是一个简单的HTML5视频播放器

        <style type="text/css">
            .easyhtml5video span {
                display: none;
            }
        </style>
        <div class="easyhtml5video" style="position: relative; max-width: 854px; max-height: 510px;">
            <video controls="controls" autoplay="autoplay" runat="server" id="video" preload="none" style="width: 100%">
                <source runat="server" id="mp4" type="video/mp4" />
                <source runat="server" id="webm" type="video/webm" />
            </video>
        </div>
        <script src="vidsrc/html5video/html5ext.js" type="text/javascript"></script>

脚本代码:

(function () {
function j(t, s, i) {
    if (t.addEventListener) {
        t.addEventListener(s, i, false)
    } else {
        t.attachEvent("on" + s, i)
    }
}

function r(t, s, i) {
    if (t.removeEventListener) {
        t.removeEventListener(s, i)
    } else {
        t.detachEvent("on" + s, i)
    }
}

function o(u, t) {
    if (!u.length) {
        u = [u]
    }
    for (var v in t) {
        for (var s = 0; s < u.length; s++) {
            u[s].style[v] = t[v]
        }
    }
}

function m(t, v) {
    v = v || document;
    if (document.getElementsByClassName) {
        return v.getElementsByClassName(t)
    }
    var w = v.getElementsByTagName("*"),
        s = [];
    for (var u = 0; u < w.length; u++) {
        if ((new RegExp("(^|\\s+)" + t + "(\\s+|$)", "g")).test(w[u].className)) {
            s.push(w[u]);
            break
        }
    }
    return s
}
var h = 0,
    n = "";
if (typeof document.cancelFullScreen != "undefined") {
    h = true
} else {
    var e = "webkit moz o ms khtml".split(" ");
    for (var f = 0, l = e.length; f < l; f++) {
        n = e[f];
        if (typeof document[n + "CancelFullScreen"] != "undefined") {
            h = true;
            break
        }
    }
}

function g(i) {
    if (h) {
        switch (n) {
        case "":
            return document.fullScreen;
        case "webkit":
            return document.webkitIsFullScreen;
        default:
            return document[n + "FullScreen"]
        }
    } else {
        return !!i.eh5v
    }
}
var k = 0;

function c(i) {
    if (h) {
        return (n === "") ? i.requestFullScreen() : i[n + "RequestFullScreen"]()
    } else {
        if (!i) {
            return
        }
        if (k) {
            d(k)
        }
        var t = {
            position: "fixed",
            left: 0,
            top: 0,
            right: "auto",
            bottom: "auto",
            width: window.innerWidth + "px",
            height: window.innerHeight + "px",
            backgroundColor: "rgba(0,0,0,0.9)",
            border: "none",
            zIndex: 9999999
        };
        i.eh5v = {};
        for (var s in t) {
            i.eh5v[s] = i.style[s]
        }
        for (var s in t) {
            i.style[s] = t[s]
        }
        j(document.body, "keydown", p);
        k = i
    }
}

function d(i) {
    if (h) {
        return (n === "") ? document.cancelFullScreen() : document[n + "CancelFullScreen"]()
    } else {
        if (!i) {
            return
        }
        for (var s in i.eh5v) {
            i.style[s] = i.eh5v[s]
        }
        i.eh5v = 0;
        r(document.body, "keydown", p);
        k = 0
    }
}

function p(i) {
    if (i.keyCode == 27) {
        d(k)
    }
}
var q;

function a(t, H) {
    var u = t.getElementsByTagName("video")[0];
    if (u) {
        if (/(iPad|iPhone|iPod)/ig.test(navigator.userAgent)) {
            var A = new Image();
            A.style.visibility = "hidden";
            A.src = u.poster;
            t.appendChild(A);
            u.style.position = "absolute";
            u.style.height = "100%"
        }
        if (u.eh5v) {
            return
        }
        u.eh5v = {
            fullScreen: function (i) {
                if (i) {
                    c(u)
                } else {
                    if (g(u)) {
                        d(u)
                    }
                }
                return g(u)
            }
        };
        var B;
        if (!H.noFS && u.getAttribute("controls") && (window.opera || /MSIE/.test(navigator.userAgent) || navigator.mozVibrate)) {
            var G = /(.*\/)[^\/]+/.exec(u.poster)[1] + "fullscreen.png";
            if (!q) {
                q = new Image();
                q.src = G
            }
            B = document.createElement("div");
            o(B, {
                position: "absolute",
                zIndex: 10,
                display: "none",
                right: "0px",
                top: "0px",
                width: "28px",
                height: "28px",
                background: 'rgba(0,0,0,0.50) url("' + G + '") 50% 50% no-repeat',
                border: "none"
            });
            u.parentNode.appendChild(B);

            function C() {
                B.style.display = "none"
            }
            j(u, "mouseover", function () {
                B.style.display = "block"
            });
            j(u, "mouseout", function () {
                C()
            });
            j(B, "mouseover", function () {
                B.style.display = "block"
            });
            j(B, "click", function () {
                c(u);
                C()
            })
        }
        j(u, "dblclick", function () {
            if (g(u)) {
                d(u)
            } else {
                c(u)
            } if (B) {
                setTimeout(C, 100)
            }
        });
        if (!u.getAttribute("loop")) {
            j(u, "ended", function () {
                setTimeout(function () {
                    u.load();
                    u.pause()
                }, 400)
            })
        }
        if (/Android/.test(navigator.userAgent)) {
            var w = u.getElementsByTagName("source"),
                D;
            for (var z = w.length - 1; z >= 0; z--) {
                if (!w[z].type) {
                    D = w[z].src
                } else {
                    if (D && /mp4/.test(w[z].type)) {
                        w[z].src = D;
                        u.load()
                    }
                }
            }
        }
        var x = document.createElement("ul"),
            F = {
                pause: {
                    label: "Pause",
                    click: function () {
                        u.pause()
                    }
                },
                play: {
                    label: "Play",
                    click: function () {
                        u.play()
                    }
                },
                mute: {
                    label: "Mute",
                    click: function () {
                        u.muted = true
                    }
                },
                unmute: {
                    label: "Unmute",
                    click: function () {
                        u.muted = false
                    }
                }
            };
        o(x, {
            position: "fixed",
            display: "none",
            listStyleType: "none",
            margin: "0px",
            padding: "0px",
            background: "#fff",
            cursor: "pointer",
            zIndex: 2147483647,
            WebkitBoxShadow: "2px 2px 10px #313131",
            MozBoxShadow: "2px 2px 10px #313131",
            boxShadow: "2px 2px 10px #313131"
        });
        j(x, "contextmenu", function (i) {
            i.preventDefault()
        });

        function y() {
            x.style.display = "none"
        }
        j(x, "click", y);
        j(window, "scroll", y);
        j(document, "click", y);
        j(document, "contextmenu", y);
        for (var v in F) {
            var s = document.createElement("li");
            o(s, {
                margin: "0px",
                padding: "3px 20px"
            });
            s.innerHTML = F[v].label;
            x.appendChild(s);
            j(s, "click", F[v].click);
            j(s, "mouseover", function () {
                o(this, {
                    backgroundColor: "#4281F4",
                    color: "#fff"
                })
            });
            j(s, "mouseleave", function () {
                o(this, {
                    backgroundColor: "transparent",
                    color: "#000"
                })
            });
            F[v].item = s
        }
        t.appendChild(x);
        j(u, "contextmenu", function (i) {
            o(x, {
                left: i.pageX + "px",
                top: i.pageY + "px",
                display: "block"
            });
            i.preventDefault();
            i.stopPropagation()
        });

        function E() {
            F.unmute.item.style.display = u.muted ? "block" : "none";
            F.mute.item.style.display = u.muted ? "none" : "block";
            F.play.item.style.display = u.paused ? "block" : "none";
            F.pause.item.style.display = u.paused ? "none" : "block"
        }
        j(window, "load", E);
        j(u, "pause", E);
        j(u, "play", E);
        j(u, "volumechange", E)
    }
}
var b = m("easyhtml5video");
for (var f = 0; f < b.length; f++) {
    a(b[f], {
        noFS: 0
    })
}
})();

此脚本由HTML5视频转换器提供。我不太了解剧本,但是,是的。

我的问题是:如何确保视频正常恢复,当我跳转到特定时间时,视频会转到该时间戳?

请注意,在编程和视频方面,我是新手。我根本没有经验......

0 个答案:

没有答案