I5中的HTML5视频奇怪行为

时间:2016-07-02 19:48:40

标签: ios html5 video

我的网站电影在所有浏览器中播放都很好,但IOS(iPhone和iPad)都有奇怪的行为。 (我无法在其他设备/移动系统中进行测试。)视频随海报一起出现。在触摸播放按钮时,虽然需要片刻响应,但它前进到电影的第一帧并且视频停止;然而,音频继续。如果您触摸屏幕并向前擦除视频,它将开始播放应有的状态。如果然后将其擦回到开头,则行为将重复:声音,但在第一帧之前没有视频,直到向前手动擦除它为止。

代码:

<video controls="controls"       poster="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg" style="width:100%" title="">
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.m4v" type="video/mp4" />
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.webm" type="video/webm" />
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.ogv" type="video/ogg" />
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.mp4" type="video/h264" />
<object type="application/x-shockwave-flash" data="http://example.com/theater/movies/current/eh5v.files/html5video/flashfox.swf"width="576" height="432" style="position:relative;">
<param name="movie" value="http://example.com/theater/movies/current/eh5v.files/html5video/flashfox.swf" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="autoplay=false&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=false&amp;poster=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg&amp;src=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.m4v" />
<embed src="http://example.com/theater/movies/current/eh5v.files/html5video/flashfox.swf" width="576" height="432" style="position:relative;"  flashVars="autoplay=false&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=false&amp;poster=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg&amp;src=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.m4v" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
<img alt="" src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg" style="position:absolute;left:0;" width="100%" title="Video playback is not supported by your browser" />
</object>
</video>

在关闭body标签之前:

<script src="http://example.com/theater/movies/current/eh5v.files/html5video/html5ext.js" type="text/javascript"></script>

我在发布之前用两个不同的转换器仔细检查了.mp4文件,并将其正确转换为h264。在我的代码中,我确实将.m4v的类型设置为.mp4。如果我更改它,则没有播放按钮,视频根本无法播放。

我将不胜感激。

1 个答案:

答案 0 :(得分:0)

我听了一段时间,停止了MAC支持新版本的FLASH。 mimeType:application / x-shockwave-flash 然后我留下一些支持线来验证mimeType,mimetype的版本以及支持浏览器的所有音频和视频CODEC。

    var util = {
    regExpEscapeSpecialCharacters: function (a) {
        return  a.toString().replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    },
    trim: function (a) {
        return a.toString().replace(/^\s+/, '').replace(/\s+$/, '');
    },
    replaceAll: function (source, search, replace, ignoreCase) {
        var search1 = this.regExpEscapeSpecialCharacters(search);
        var ignore = (ignoreCase) ? "gi" : "g";
        var result = source.replace(new RegExp(search1, ignore), replace);
        return result;
    },
    isEqualString: function (str1, str2, ignoreCase) {
        str1 = str1.toString();
        str2 = str2.toString();
        var search = this.regExpEscapeSpecialCharacters(str1);
        var ignore = (ignoreCase) ? "gi" : "g";
        var reg = new RegExp("^" + search + "$", ignore);
        return reg.test(str2);
    },
    contain: function (source, search, ignoreCase) {
        search = this.regExpEscapeSpecialCharacters(search);
        var ignore = (ignoreCase) ? "gi" : "g";
        var reg = new RegExp(search, ignore);
        return reg.test(source);
    },
    isUndefinedOrNull: function (a) {
        return (typeof (a) === "undefined") || (a === null);
    },
    getMimeTypeVersion: function (name) {

        var obj = this.getMimeType(name);

        if (!this.isUndefinedOrNull(obj)) {
            if (!this.isUndefinedOrNull(obj["version"])) {
                return obj["version"];
            } else {

                if (!this.isUndefinedOrNull(obj["description"])) {
                    var d = obj["description"];

                    return this.trim(this.replaceAll(d, name, "", true));

                } else {
                    return null;
                }
            }
        } else {
            return null;
        }

    },
    getMimeType: function (type) {

        var obj = null;
        for (var o in navigator.mimeTypes) {

            if (navigator.mimeTypes[o]["enabledPlugin"]) {
                var mime = navigator.mimeTypes[o];

                if (!this.isUndefinedOrNull(mime) && (!this.isUndefinedOrNull(mime["type"]))) {
                    if (this.isEqualString(mime["type"], type, true)) {
                        obj = mime["enabledPlugin"];
                        break;
                    }
                }
            }


        }
        return obj;
    },
    getMimeTypeBySuffix: function (suffix) {
        var obj = null;
        for (var o in navigator.mimeTypes) {
            if (navigator.mimeTypes[o]["enabledPlugin"]) {
                var mime = navigator.mimeTypes[o];
                if (!this.isUndefinedOrNull(mime["suffixes"])) {
                    if (this.isEqualString(mime["suffixes"], suffix, true)) {
                        obj = mime["enabledPlugin"];
                        break;

                    }
                }

            }

        }
        return obj;
    },
    getMimeTypeByName: function (name) {
        var obj = null;
        for (var o in navigator.mimeTypes) {
            if (navigator.mimeTypes[o]["enabledPlugin"]) {
                var mime = navigator.mimeTypes[o]["enabledPlugin"]; //["enabledPlugin"]
                if (!this.isUndefinedOrNull(mime["name"])) {
                    if (this.isEqualString(mime["name"], name, true)) {
                        obj = mime;
                        break;
                    }
                }
            }
        }
        return obj;
    },
    getAllVideoCodecs: function () {
        var obj = new Array();
        var vid = document.createElement('video');
        for (var o in navigator.mimeTypes) {
            if (navigator.mimeTypes[o]["enabledPlugin"]) {
                var mime = navigator.mimeTypes[o];
                if (!this.isUndefinedOrNull(mime) && (!this.isUndefinedOrNull(mime["type"]))) {
                    if (this.contain(mime["type"], "video/", true)) {
                        var type = mime["type"];

                        if (!this.isUndefinedOrNull(vid) && ("canPlayType" in vid) && (vid.canPlayType(type) !== "")) {
                            obj.push(type);
                        }
                    }
                }
            }
        }
        return obj;
    },
    getAllAudioCodecs: function () {
        var obj = new Array();
        var vid = document.createElement('video');
        for (var o in navigator.mimeTypes) {

            if (navigator.mimeTypes[o]["enabledPlugin"]) {
                var mime = navigator.mimeTypes[o];
                if (!this.isUndefinedOrNull(mime) && (!this.isUndefinedOrNull(mime["type"]))) {
                    if (this.contain(mime["type"], "audio/", true)) {
                        var type = mime["type"];

                        if (!this.isUndefinedOrNull(vid) && ("canPlayType" in vid) && (vid.canPlayType(type) !== "")) {
                            obj.push(type);
                        }

                    }
                }
            }

        }
        return obj;
    }
};

try {


//Check mimetype and CODES.
    var mime = "application/x-shockwave-flash";
    var objMimeType = util.getMimeType(mime);
    if (objMimeType !== null) {
        //Supported....
        document.write("MIMETYPE SUPPORTED<br />");
        var version = util.getMimeTypeVersion(mime);
        if (version !== null) {
            //COMPARE HERE YOUR VERSION.
            document.write("VERSION MIMETYPE:  " + version + "<br />");

            document.write("######## VIDEO CODEC SUPPORTED #######" + "<br />");

            //ARRAY OF ALL VIDEOCODEC SUPPORTED IN BROWSER.
            var arrayVideoCodec = util.getAllVideoCodecs();
            if (arrayVideoCodec.length > 0) {
                for (var i = 0; i < arrayVideoCodec.length; i++) {
                    var videoCodec = arrayVideoCodec[i];
                    //######3Print here the result.
                    document.write(videoCodec + "<br />");
                }
            }
            //ARRAY OF ALL AUDIOOCODEC SUPPORTED IN BROWSER.

            document.write("<br /><br />######## AUDIO CODEC SUPPORTED #######" + "<br />");
            var arrayAudioCodec = util.getAllAudioCodecs();
            if (arrayAudioCodec.length > 0) {
                for (var i = 0; i < arrayAudioCodec.length; i++) {
                    var audioCodec = arrayAudioCodec[i];
                    //######3Print here the result.
                    document.write(audioCodec + "<br />");
                }
            }

        }
    } else {
        //NO MIME TYPE.
        document.write("NO MIMETYPE SUPPORTED");
    }

} catch (e) {
    alert(e);
}