HTML5ビデオIOSの奇妙な動作

Question

私のサイトの映画はすべてのブラウザで正常に再生されますが、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タグを閉じる前に：私は投稿する前に、2つの異なるコンバータとのMP4ファイルをダブルチェックし、それが正しくH264に変換され

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

。私のコードでは、.m4vのタイプを.mp4に設定しています。私がそれを変更すると、再生ボタンはなく、ビデオはまったく再生されません。

私は助けていただきありがとうございます。

Answer 1

私はしばらく聴いて、FLASHの新しいバージョンのMACサポートを停止しました。 mimeType：application/x-shockwave-flash 次に、mimeType、MIMEタイプのバージョン、およびブラウザをサポートするすべてのオーディオおよびビデオ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); 
}