再生ボタンや一時停止ボタンを追加して動画再生をコントロールできるようにしたい

###前提・実現したいこと
google vr viewで画面をタップもしくはボタンなどで再生，一時停止がコントロールできるようにしたい。
また，早送りや巻き戻しのコントロールバーを追加したい。

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

PCだとロードが完了すると動画が自動再生されてしまい，また一時停止することができません。
スマホだとロードが終わると再生ボタンが表示されますが，一時停止することができません。
js初心者でgithubから落としてきたサンプルコードを読み解くことができません。
play()やpause()メソッドは準備されているように思うのですか，具体的な実装方法がいまいち分かりません。
巻き戻しや早送りについてはライブラリにメソッドは準備されていないように思うのですが，実現は不可能なのでしょうか。

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

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>VR View - video example</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    <style>
9            html, body{
10                width: 50%;
11                height: 50%;
12                margin: 0;
13            }
14    </style>
15  </head>
16
17  <body>
18
19    <h1>VR Test</h1>
20    
21    <!--<iframe frameborder="0" width="100%" scrolling="no" allowfullscreen src="vrview/index.html?video=/vrview/examples/video/congo_2048.mp4&is_stereo=true"></iframe>-->
22   	<iframe frameborder="0" width="100%" height="100%" scrolling="no" allowfullscreen src="vrview/index.html?video=//meditatesttaito.streaming.mediaservices.windows.net/bd6d1290-74f2-44e4-9386-d1ebc8c3eea7/Sample1.ism/manifest(format=mpd-time-csf).mpd"></iframe>
23
24  </body>
25
26</html>
27

他のソースはgoogle vr viewのgithubから落としてきたままのソースコードを使っています。

###補足情報(言語/FW/ツール等のバージョンなど)
google vr view for web
https://github.com/googlevr/vrview

行動規範の内容に同意します

回答1件

ベストアンサー

今までは、<iframe>を配置して表示しましたが、プレイヤーの制御を行いたい場合は、<iframe>の配置ではなくJavaScriptのAPIを使用する方法に変えなければなりません。APIを実行すればAPI側で<iframe>を配置するとともにプレイヤーを制御できるようになります。そのためには、<div id="vrview">フルスクリーンではないときの表示させたい位置に配置します。

js
1window.addEventListener('load', onVrViewLoad);
2var vrView = null;
3var state = null;
4function onVrViewLoad() {
5    vrView = new VRView.Player('#vrview', {
6        video: '//meditatesttaito.streaming.mediaservices.windows.net/bd6d1290-74f2-44e4-9386-d1ebc8c3eea7/Sample1.ism/manifest(format=mpd-time-csf).mpd',
7        width: '100%',
8        height: '100%'
9    });
10    vrView.on('ready', function () {
11        // PCで自動再生されないようにする
12        vrView.pause();
13        state = 'pause';
14    });
15    vrView.on('click', function () {
16        // タップするたびに再生・一時停止を繰り返す
17        if (state === 'pause') {
18            vrView.play();
19            state = 'play';
20        } else {
21            vrView.pause();
22            state = 'pause';
23        }
24    });
25}

このようなコードを書くことで、タップするたびに再生・一時停止を繰り返すようにできます。
ただし、残念ながらこのAPIを使ってもループをオフにすることはできないようです。
サンプル
 サンプルソース

投稿2017/02/07 06:02

turbgraphics200

総合スコア4269

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

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

関連した質問