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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

5895閲覧

.m3u8形式の動画ファイルを360°&VR再生したい

snooooopy_16

総合スコア15

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/01/15 07:52

###前提・実現したいこと
google vr view for webのAPIを利用してm3u8形式の動画をweb上で360度&VR再生したいです。

###発生している問題・エラーメッセージ

動作確認はOS Xの10.12.6のsafariブラウザで確認しましたが、音声のみの再生となり、映像を見ることができません。

###該当のソースコード

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title>VR View Codelab</title> 5 <meta name=viewport content="width=device-width, initial-scale=1"> 6 <meta charset="utf-8" /> 7 <link href="//fonts.googleapis.com/css?family=Lora|Open+Sans" rel="stylesheet" type="text/css"> 8 <link href="styles/style.css" rel="stylesheet" type="text/css"> 9 <style> 10 </style> 11</head> 12 13<h1>VR TEST</h1> 14<iframe 15 frameborder="0" 16 width="100%" 17 scrolling="no" 18 allowfullscreen 19 src=" src="vrview/index.html?video=https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8"> 20</iframe> 21 22</body> 23</html>

JavaScript

1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <title>VR view</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 7 <meta name="mobile-web-app-capable" content="yes"> 8 <meta name="apple-mobile-web-app-capable" content="yes" /> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 10 <link rel="stylesheet" href="style.css"> 11 </head> 12 13 <body> 14 <div id="error" class="dialog"> 15 <div class="wrap"> 16 <h1 class="title">Error</h1> 17 <p class="message">An unknown error occurred.</p> 18 </div> 19 </div> 20 21 <div id="play-overlay"> 22 <img src="images/ic_play_arrow_white_24dp.svg"/> 23 </div> 24 25 <a id="watermark" href="http://g.co/vr/view" target="_blank"> 26 <img src="images/ic_info_outline_black_24dp.svg"/> 27 </a> 28 29 <script> 30WebVRConfig = { 31 BUFFER_SCALE: 0.5, 32 TOUCH_PANNER_DISABLED: false 33}; 34 </script> 35 36 <script src="build/three.js"></script> 37 <script src="build/embed.js"></script> 38 </body> 39</html> 40

###試したこと
.mpd形式の動画ファイルは360度&VRで再生することができました。

###補足情報(言語/FW/ツール等のバージョンなど)

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

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

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

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

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

guest

回答1

0

ベストアンサー

Safariのバグです。

#TL;DL
VR View for the Web では、というよりWebでの360°動画プレイヤー(たぶん)すべてに当てはまることですが、WebGLを使用して360°メディアのプレイヤーを構築しています。
WebGLでは画像や動画をテクスチャー(3Dのオブジェクトに張り付ける画像と思ってください)の素材として使用することができますが、素材に使用する際にimgエレメントやcanvasエレメント、videoエレメントを用いて使用します。
ただ、SafariのWebGLでは画像や動画をテクスチャーに使用するにあたり同一ドメインのものしか使用できないというバグが(もう3年も前にバグと認識しているのにもかかわらず)いまだに修正されていません。
動画をvideoエレメントで一応再生しているため、音は鳴るのですが映像が描画されない状態となります。
ですので、HLS(m3u8)のセグメントファイルが別ドメインのものであれば、映像が描画できず、同一ドメインに配置されていれば、映像を描画させることができます。

##バグ回避
一応、回避方法はあります。videoエレメントの映像をいったんcanvasエレメントに描画して、canvasエレメントをWebGLのテクスチャーの素材として使用すれば描画することができます。
ただし、重いです。HLSはアダプティブストリーミングですので、回線状況が良ければ、4K等の高解像度のレベルを選択して受信します。フルHD画質でしたらまだいいですが、4Kともなるとこの回避方法での描画は格段に重くなってしまいます。
あと、VR View for the Webのように一つのライブラリとして完結して提供されているものに、この回避方法を組み込むことは不可能ではないと思いますがとても難しいです。

##プレイヤーを自作
ですので、three.jsWebVR Boilerplateといったもう一つ低レベルのライブラリを使用して、自分で前述のバグ回避を組み込んだプレイヤーを作成すればSafariでも再生できるプレイヤーを作成できます。
three.js WebVR Boilerplateの使用方法解説記事

##サンプル
自作プレイヤーサンプルを3つ用意しました。
いずれも再生や一時停止等のボタンやシークバーは一切ありませんが、映像が描画されるものはマウスで方向を操作することはできます。

  1. HLS(.m3u8クロスオリジン)をソースにしたバグ回避していない(素材にvideoエレメントを使用した)プレイヤー

映像が描画されず音だけが鳴るという現象を再現するサンプル。

  1. HLS(.m3u8クロスオリジン)をソースにしたバグ回避を組み込んだ(素材にcanvasエレメントを使用した)プレイヤー

音が鳴ることはもとより映像が描画されるプレイヤーのサンプル。

  1. HLS(.m3u8)ではないが同一ドメインに配置した動画ファイルをソースにした(バグ回避不要)プレイヤー

同一ドメイン内に配置した動画を使用してるため、バグ回避する必要なく再生(描画)することができます。
(Githubにアップロードできるサイズが25MBなため、動画は後ろ20秒程度削ったものを使用しています。)

サンプルのGitHub

###気になった点
.mpd形式の動画ファイルは360度&VRで再生することができました。と書かれていますが、これはSafariでのことでしょうか?(SafariはMPEG-DASHには対応していないためライブラリ使用するしかないと思いますが。それとも別のブラウザーで再生できたということなのでしょうか。)

投稿2017/01/16 09:36

編集2017/01/16 20:20
turbgraphics200

総合スコア4267

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

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

snooooopy_16

2017/02/02 02:51 編集

.mpdはandroid及びwindowsのchromeブラウザで再生できました。 3.のプレイヤーはHLSではないというのはHLSでは再生できないということでしょうか? また,この事象はiphoneでも同様の事象が発生しますが、iphoneの場合でも記載頂いた解決策と同様の解決策で解消されるのでしょうか?(本命はiphoneで再生したいです。。)
turbgraphics200

2017/02/02 06:57

いろいろと試したりしましたが、やはり、iOSだと同じドメインの動画でであればできますが、別ドメインの動画は現状無理ですね。
snooooopy_16

2017/02/02 10:01

初歩的な質問で大変申し訳ございません。 m3u8ファイルとセグメントファイルが同一ドメインにあるべきということでしょうか?
turbgraphics200

2017/02/02 10:05

m3u8ファイル(=セグメントファイル)とVR Viewページが同一ドメインにあるべきということです
snooooopy_16

2017/02/07 04:27

なるほどです。ありがとうございます!
snooooopy_16

2017/03/09 13:43 編集

少し教えてください! 3のプレイヤーで再生したところ(以下のURLです)iphoneで確かに再生できたのですが、二眼でVR動画が再生されたかと思いきや、画面が切り替わり、VRになっていない動画が再生されてしまいます。同時に再生されているように見えます。 http://meditatesttaito.streaming.mediaservices.windows.net/efa98944-460d-4cff-a42b-810667aaa952/m3u8_texturesrc_canvas.html
snooooopy_16

2017/03/09 13:24

また、3のプレイヤーでiphoneで再生したところ、再生ボタンを押すとVRになっていない動画が流れるという事象でした。これはやはり、上手く同じドメインに置くことができていないのが原因でしょうか?
turbgraphics200

2017/03/09 13:32

プレイヤーが上にかぶさって表示され再生されるって感じですよね?
snooooopy_16

2017/03/09 13:45

VR動画が少し流れてすぐに画面が切り替わり、VR動画ではない動画が流れ始めてしまいます。。
turbgraphics200

2017/03/09 13:46

videoエレメント生成時に、webkit-playsinlineという属性をつければできると思います。
snooooopy_16

2017/03/09 13:49

var cnv = document.createElement('canvas'); //var vid = document.createElement('video'); var ctx = null; cnv.crossOrigin = 'anonymous'; //vid.crossOrigin = 'anonymous'; //vid.setAttribute('webkit-playsinline', 'webkit-playsinline'); //vid.src = 'http://meditatesttaito.streaming.mediaservices.windows.net/a6226b12-1e4f-4115-bea8-e51750cddec0/Sample3.ism/manifest(format=m3u8-aapl).m3u8'; vid.onloadedmetadata = function() { ctx = cnv.getContext('2d'); //vid.play(); } vid.style.width = '1280px'; vid.style.height = '1280px'; //document.body.appendChild(vid); この部分でしょうか?
snooooopy_16

2017/03/09 13:49

もしかしてコメントアウトしているのも問題ですか?
turbgraphics200

2017/03/09 13:50

vid.setAttribute('webkit-playsinline', 'webkit-playsinline');のコメントアウトを外してみてください。
snooooopy_16

2017/03/09 13:54

//var vid = document.createElement('video');はコメントアウトされていて大丈夫ですか?
snooooopy_16

2017/03/09 13:57

vid.setAttribute('webkit-playsinline', 'webkit-playsinline');のコメントアウトを外しただけではだめでした。同じ事象です。
turbgraphics200

2017/03/09 14:07

あ、このソースは今回は無視してください。 ちなみに、なぜAzureなのでしょうか?
snooooopy_16

2017/03/09 14:22

azureを触れる人がいたからです笑 awsだとなんとかなるのでしょうか。。
snooooopy_16

2017/03/09 14:24

このソースとは//var vid = document.createElement('video');のことでしょうか??
turbgraphics200

2017/03/09 14:26

いや、このプレイヤー自体のことです。 Azureでもできると思いますが、私はazureほとんど触ったことないからですw
turbgraphics200

2017/03/09 14:28

(さらに)ちなみに、これは個人で制作されているものでしょうか?
snooooopy_16

2017/03/09 14:29

ちなみに実現できている3のプレイヤーはなんのサーバー使っているんですか?3のプレイヤーでiphone再生はできてたのですか??
snooooopy_16

2017/03/09 14:29

はい!個人で作成しております!!
turbgraphics200

2017/03/09 14:32

HLS(.m3u8)での配信にこだわっている?理由は何でしょうか?
snooooopy_16

2017/03/09 14:45

iosで動画のストリーミング再生を実現したいのです。。
snooooopy_16

2017/03/09 14:46

iphoneでストリーミング再生するためには.m3u8でしか、できないの認識しているのですが違うのでしょうか?
turbgraphics200

2017/03/09 14:48

いや、その認識は正しいです。 ストリーミングでもライブとオンデマンドの2つがありますがライブ配信を行いたいということでしょうか?
snooooopy_16

2017/03/09 14:58

そうです!ライブ配信したいのです。。
snooooopy_16

2017/03/10 08:37

3のプレイヤーだと、全画面表示をやめると二眼でVR動画がみれますね。 上手くインライン再生できていないのでしょうか。。
turbgraphics200

2017/03/10 09:56

返事が遅くなり申し訳ありません。 いや、VR View でもiframe内のAdaptivePlayerのソースをいじればできると思います。 あと、ライブ配信となると結構出費(月数万単位)が必要となると思うのですが、その辺大丈夫なんでしょうかw?
snooooopy_16

2017/03/10 10:52

この事象はVRになっている動画とVRになっていない動画が両方同時に再生されているということでしょうか?笑 私の考えはiphoneの仕様上動画がフルスクリーンで再生しようとされてしまうので、そこをインライン再生にし、フルスクリーンにならないようにすれば(画面の最大化を閉じるボタンを押すとVR動画でみられたので。。)このVR問題は解決されるのではと思ったのですが、この見解はちょっとずれてましたかね笑 いまいちこの事象がなぜ起きているのかが分かりません。。
snooooopy_16

2017/03/10 10:52

あと、ライブ配信ではなくやろうとしてたのはオンデマンドでした笑
turbgraphics200

2017/03/10 11:12

その見解であってます。 オンデマンドでしたら、別にHLSでなくても普通にmp4で大丈夫だと思いますが。
snooooopy_16

2017/03/10 11:46

あ、となるとやはりライブ配信の方が実現させたいですね笑 なるほど。 認識としては間違ってないですが、インライン再生にするplaysinlineをいれるだけではだめで、追加でAdaptivePlayerをいじる必要があるということですか??AdaptivePlayerをいじるところはVRになっていないプレイヤーをなんとかして消すような処理にするのですか?
turbgraphics200

2017/03/10 12:25

あ、すいませんいじる必要ないですね。 ライブ配信となると先ほど言ったようにお金かかりますが大丈夫でしょうか?
snooooopy_16

2017/03/10 13:59

いじる必要はないですか。。 うーん。。 お金については一旦この辺りができてから考えようとおもっております笑
snooooopy_16

2017/03/19 07:19

以前の問題については,vid.style.visibility="hidden"を追加することで解決できました! ちなみに3のプレイヤーでタップして一時停止機能と,シークバーを実装したいのですが,以前iframeで実現して頂いたものは作りが違うので応用できないように感じました。 3のプレイヤーだとvideoタグを使っているので,videoタグのapiを使うのだろうと思うのですが,うまく実装できません。ご教授頂けないでしょうか・・?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問