プレイヤーに動画のコントロール機能を埋め込みたい

Question

###前提・実現したいこと
画面をタップして動画を再生・一時停止を行い，シークバーをつけたい。
端末はiphoneです。

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

一旦，jsにスクリプトを埋め込んでみましたが，動きません。
シークバーについてはjsの組み込み方及び組み込み場所が分からず，手つかずです。

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

gitにソースを置いています。
https://github.com/takimegu/ios

###補足情報(言語/FW/ツール等のバージョンなど)
iphoneで実現させたいです。

Answer 1

以前、コメントしましたサンプルを参考にしてください。
embed.jsのコードにシークバーや自動再生を行わない、ループさせないための修正したところ(追加した行やコメントアウトしたところ)に★をつけています。またvrview/index.html内にもタップで再生/一時停止を行うJavaScriptを書いています。
シークバーは、一から作るのは面倒ですのでnouisliderというライブラリを使用しています。
現在このままだとVR表示に切り替えてもシークバーが表示されたままとなりますのでその部分の追加実装が必要となります。

Comments

[snooooopy_16]

今，embed.jsは利用していないのですが，embed.jsに書いている箇所は代わりにsame_origin.jsに追加する認識であっていますでしょうか？

[turbgraphics200]

そっちのコードはビューワーを自作するタイプのコードですがそれでいいのですか？

[snooooopy_16]

androidはiframeを使った以下のサンプルで動きましたが，https://github.com/turbographics2000/google_vr_for_web_test/tree/master/docs
iphoneは上記のサンプルでは動かず，ビューワーを自作する方法しか無く，以前サポートして頂いたこのプレイヤー（https://github.com/takimegu/ios）で実現できたので，それに再生・一時停止機能とシークバーをつけようとしておりました。
なので，これでいいと思っていたのですが，私はもしかして何か勘違いをしているのでしょうか。。

[snooooopy_16]

ちなみにですが，https://teratail.com/questions/62070で作って頂いた3つのプレイヤーで，2のプレイヤーは重いということなので，今回は3のプレイヤーでiosの.m3u8の360度再生を実現させようとしております！

[turbgraphics200]

いや、動画を同一ドメインに配置するという方針に固めたということは、ビューワーはGoogle の VR Viewを使う方向にしたのだと思ったのですが。
自作するタイプの場合は、このままではHLS再生ができないため、HLS再生をサポートするにはVideo.js等のライブラリの組み込みが必要となってきます。

[snooooopy_16]

なるほどです。
なにか私は勘違いしているようです。
同一ドメインに配置する方法にすれば、以下のコード(google vr view)でもiphoneで360度再生できるということでしょうか？
https://github.com/turbographics2000/google_vr_for_web_test/tree/master/docs

[snooooopy_16]

いまのところ3のプレイヤー(https://github.com/takimegu/ios)でiphoneでhls再生は一応できているのですが本来はvideo.jsなどの組み込みが必要なのですね。。なぜ動いているのでしようか笑
ただ偶然動いているだけなのであれば怖いので、https://github.com/turbographics2000/google_vr_for_web_test/tree/master/docsにあるコードでiphoneでも実現させたいですね。少し試してみます！！

[turbgraphics200]

>同一ドメインに配置する方法にすれば・・・再生できる
はい。そういうことです。

あと、久しぶりにバグリストを見てみるとApple側からコメントがあがっているので、もしかするとバグが修正され同一ドメインでなくても再生できるかもしれません。(バグ修正がいつになるかはわかりませんが)

[snooooopy_16]

二眼にしたときに、シークバーが出続ける事象を解消したいのですが、どのように制御すればよいのでしょうか。。

[snooooopy_16]

ついにですね！ただいつになるのか期待がもてないですね。。笑

[turbgraphics200]

embed.js内のButtonManager.prototype.setMode関数で制御を行っていますのでここでシークバーの表示制御を追加すればいいでしょう。
https://turbographics2000.github.io/google_vr_for_web_test/test2.html
こちら、追加したものにアップデートしました。