add mobile player and fullscreen support for iOS

This commit is contained in:
Jason Hunter 2021-06-04 16:49:28 -04:00 committed by Blake Blackshear
parent c73aebadcb
commit 88ed7501a7
4 changed files with 20 additions and 0 deletions

9
web/package-lock.json generated
View File

@ -11933,6 +11933,15 @@
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz", "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
"integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==" "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
}, },
"videojs-mobile-ui": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/videojs-mobile-ui/-/videojs-mobile-ui-0.5.3.tgz",
"integrity": "sha512-rY+JFLUq2edqoWB4CHVxPLYQEYhSNdGylGe44MEdfxzqYaEgkf/qyDlmmpdN9BFIQ6vJ7eaQBxgTOHha8UpOGA==",
"requires": {
"global": "^4.3.2",
"video.js": "^5.19.2 || ^6.6.0 || ^7.0.0"
}
},
"videojs-playlist": { "videojs-playlist": {
"version": "4.3.1", "version": "4.3.1",
"resolved": "https://registry.npmjs.org/videojs-playlist/-/videojs-playlist-4.3.1.tgz", "resolved": "https://registry.npmjs.org/videojs-playlist/-/videojs-playlist-4.3.1.tgz",

View File

@ -18,6 +18,7 @@
"preact-async-route": "^2.2.1", "preact-async-route": "^2.2.1",
"preact-router": "^3.2.1", "preact-router": "^3.2.1",
"video.js": "^7.11.8", "video.js": "^7.11.8",
"videojs-mobile-ui": "^0.5.3",
"videojs-playlist": "^4.3.1", "videojs-playlist": "^4.3.1",
"videojs-seek-buttons": "^2.0.0" "videojs-seek-buttons": "^2.0.0"
}, },

View File

@ -1,5 +1,6 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import videojs from 'video.js'; import videojs from 'video.js';
import 'videojs-mobile-ui';
import 'videojs-playlist'; import 'videojs-playlist';
import 'videojs-seek-buttons'; import 'videojs-seek-buttons';
import 'video.js/dist/video-js.css'; import 'video.js/dist/video-js.css';
@ -25,6 +26,11 @@ export default class VideoPlayer extends Component {
forward: 30, forward: 30,
back: 10, back: 10,
}); });
this.player.mobileUi({
fullscreen: {
iOS: true,
},
});
} }
componentWillUnmount() { componentWillUnmount() {

View File

@ -25,3 +25,7 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.video-js.vjs-has-started .vjs-touch-overlay {
display: none;
}