Q:

HTML5 Video odd behavior in IOS

My site's movie plays fine in all browsers but there is odd behavior in IOS (both iPhone and iPad).  (I am unable to test in other devices/mobile systems.)  The video appears with the poster in place. Upon touching the play button, although it takes a moment to respond, it advances to the first frame of the movie and the video stops; however, the audio continues. If you touch the screen and scrub the video forward, it will begin to play as it should.  If you then scrub it back to the beginning, the behavior repeats:  sound, but no video past the first frame until manually scrubbing it forward.
The code:
<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>

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

I double-checked the .mp4 file with 2 different converters before posting and it is correctly converted to h264.  In my code, I do have the type for .m4v set to .mp4.  If I change it, there is no play button and the video does not play at all.
I would appreciate any help.

A:

I listened a while, that stopped MAC support for new versions of FLASH ago. mimeType: application / x-shockwave-flash
Then I leave some support lines to verify the mimeType, the version of the mimetype and for all audio and video CODEC that supports the browser.
    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);
}

