質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

5286閲覧

androidブラウザでサーバから取得したBlobデータをvideoタグで表示したい

yoshi-bad

総合スコア12

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2015/08/14 13:10

編集2022/01/12 10:55

以下のような処理を行いたいと考えています。

  1. Webサーバから動画ファイルをバイト配列として取得
  2. JavaScriptでBlobに加工
  3. 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)の作り方が悪いのでしょうか…。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こちらが参考になると思います。

javascript - Problem retrieving HTML5 video duration - Stack Overflow

DOMに追加した瞬間にvideoのデータすべてがオンラインになるわけではなく、データをロードして再生するまで多少時間がかかります。
想定しているAndroidのブラウザでloadedmetadataイベントがあるかどうかは分かりませんが、まずはこれを試してみてはどうでしょう。

投稿2015/08/14 13:33

sharow

総合スコア1149

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshi-bad

2015/08/17 07:13

ご教授ありがとうございました。 紹介いただいたHPを参考に色々と調べてみたところ、 loadedmetadataイベントは実行されておりました。 しかし、loadedmetadata、loadeddataイベントは実行され、 readyStateが2(HAVE_CURRENT_DATA)にはなっていたものの、 その後、stalledイベントが発生しており、 readyStateが3(HAVE_FUTURE_DATA)以上になることはありませんでした。 ローカルファイル(Blob)の作成方法が悪いのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問