Onsen UIのライブラリを追加するとVideoJSが動かなくなる

環境・ライブラリなど

package.jsonの依存関係

json
1{
2  "dependencies": {
3    "basic-auth-connect": "1.0.0",
4    "body-parser": "^1.15.2",
5    "compression": "^1.6.2",
6    "express": "^4.14.0",
7    "key-mirror": "1.0.1",
8    "linkify-it": "2.0.0",
9    "moment": "2.14.1",
10    "morgan": "^1.7.0",
11    "onsenui": "2.0.3",
12    "react": "15.3.1",
13    "react-avatar-editor": "4.1.3",
14    "react-burger-menu": "1.10.4",
15    "react-dom": "15.3.1",
16    "react-facebook-login": "3.1.0",
17    "react-ga": "2.1.2",
18    "react-helmet": "3.1.0",
19    "react-lazy-load": "3.0.10",
20    "react-linkify": "0.1.1",
21    "react-notification-system": "0.2.10",
22    "react-onsenui": "1.0.0",
23    "react-photoswipe": "1.2.0",
24    "react-redux": "^4.4.5",
25    "react-router": "^2.5.2",
26    "react-router-scroll": "0.2.1",
27    "react-scroll": "1.1.3",
28    "react-switchery": "1.1.0",
29    "react-weui": "0.4.0",
30    "react-youtube": "7.0.1",
31    "redux": "^3.5.2",
32    "redux-thunk": "^2.1.0",
33    "request": "2.74.0",
34    "tlds": "1.153.0",
35    "whatwg-fetch": "1.0.0"
36  },
37  "devDependencies": {
38    "autoprefixer": "6.4.1",
39    "babel-plugin-transform-object-rest-spread": "6.16.0",
40    "babel-polyfill": "6.13.0",
41    "babel-preset-es2015": "6.16.0",
42    "babel-preset-react": "6.16.0",
43    "babel-preset-stage-1": "6.5.0",
44    "babelify": "7.3.0",
45    "browser-sync": "2.17.3",
46    "browserify": "13.1.0",
47    "envify": "3.4.1",
48    "node-sass": "3.8.0",
49    "postcss-cli": "2.6.0",
50    "react-svg-loader": "1.0.1",
51    "uglifyjs": "2.4.10",
52    "video.js": "5.14.1",
53    "watchify": "3.7.0"
54  }
55}

現象

VideoJSで動画プレイヤーを表示するページがあるんですが、Onsen UIを読み込むとコントロールが効かなくなります。（コントロールバーの再生/停止ボタン、フルスクリーン表示ボタンなど）

VideoJSの正しい挙動: http://videojs.com/advanced/
VideoJSがうまくうごかないのを再現したCodePen: http://codepen.io/anon/pen/YNQPZE?editors=0010

質問

Onsen UIとVideoJSを併用する方法があれば教えてください。
なかったら辛いです。

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

回答1件

ベストアンサー

Onsen UI 開発メンバの @n_matagawa です。

再生/一時停止ボタンに紐づけられているイベントリスナを Chrome DevTools で調査したところ、mousedown イベントにおいて、Onsen UI の GestureDetector と VideoJS の処理が競合していることが分かりました。

GestureDetector は Onsen UI が持つ Hammer.js を元にしたタッチイベント検知機能であり、onsenui.js または onsenui.min.js をロードすると自動的に body 要素内に対して GestureDetector の紐付けが行われます。
これが今回の問題の原因です。

この問題を解決するには、以下のコードを onsenui.js または onsenui.min.js より後の位置に追加してください（Onsen UI 2.0.5 にて動作を確認）。

js
1window.addEventListener('DOMContentLoaded', function(e){
2  // body 要素に紐づけられた GestureDetector インスタンスを破壊
3  document.body._gestureDetector.dispose();
4});