以下のような処理を行いたいと考えています。
- Webサーバから動画ファイルをバイト配列として取得
- JavaScriptでBlobに加工
- Blobをvideoタグのsrcに設定し、再生
そのために次のようなJavaScriptを記述しました。
JavaScript
1コード /* リクエスト生成・送信 */ 2 var xhr = new XMLHttpRequest(); 3 xhr.open("GET", url + "?" + dataQery, true); 4 xhr.responseType = "arraybuffer"; 5 xhr.onload = function() { 6 if(this.status == 200) { 7 var bytes = new Uint8Array(this.response); 8 var blob; 9 try { 10 blob = new Blob([bytes], {type: "video/mp4"}); 11 } catch(e) { 12 window.BlobBuilder = window.BlobBuilder || 13 window.WebKitBlobBuilder || 14 window.MozBlobBuilder || 15 window.MSBBlobBuilder; 16 if(e.name == "TypeError" && window.BlobBuilder) { 17 /* 旧Chrome、Android等への対応 */ 18 var bb = new BlobBuilder(); 19 bb.append(bytes.buffer); 20 blob = bb.getBlob("video/mp4"); 21 } else { 22 /* Blob未サポートブラウザ */ 23 } 24 } 25 26 /* BlobをURLに変換 */ 27 var URL = window.URL || window.webkitURL; 28 var contents = URL.createObjectURL(blob); 29 $("#video").attr("src", contents); 30 } 31 }; 32 xhr.send(); 33
結果、WindowsのIE10・Chrome、iOS8のSafariでは再生させることができたのですが、
Android端末の標準ブラウザ、Chromeでは再生できませんでした。
(Androidのバージョンは、4.1.2 softbankの205sh)
Android標準ブラウザの場合、
Blobの作成(BlobBuilderを使用)は、上手くできているようで、ファイルのロードが行われ、videoタグの再生ボタンは押せるのですが、「videoタグ要素.duration」を表示させたところ、「1」となり(本来は24秒)再生できません。
Android Chromeの場合は、Blobの作成(Blobを使用)は上手くいっているようなのですが、ロードの際にエラーが発生してしまいます(エラーコード:4)。
どちらかでも再生させることができないでしょうか。
(追記)
その後の調査の結果、Androidブラウザの場合、stalledイベントが発生していることが分かりました。
ファイル(Blob)の作り方が悪いのでしょうか…。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/17 07:13