working on desktop
This commit is contained in:
parent
fdfabe7ccf
commit
429ead3b3b
2 changed files with 23 additions and 5 deletions
|
@ -221,6 +221,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
eventTracking: true,
|
eventTracking: true,
|
||||||
overlay: OVERLAY.OVERLAY_DATA,
|
overlay: OVERLAY.OVERLAY_DATA,
|
||||||
},
|
},
|
||||||
|
// bigPlayButton: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
const tapToUnmuteRef = useRef();
|
const tapToUnmuteRef = useRef();
|
||||||
|
@ -497,7 +498,13 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
const wrapper = document.createElement('div');
|
const wrapper = document.createElement('div');
|
||||||
wrapper.setAttribute('data-vjs-player', 'true');
|
wrapper.setAttribute('data-vjs-player', 'true');
|
||||||
const el = document.createElement(isAudio ? 'audio' : 'video');
|
const el = document.createElement(isAudio ? 'audio' : 'video');
|
||||||
el.className = 'video-js vjs-big-play-centered ';
|
el.className = 'video-js';
|
||||||
|
|
||||||
|
if(!IS_IOS){
|
||||||
|
el.classList.add('vjs-big-play-centered');
|
||||||
|
}
|
||||||
|
|
||||||
|
// el.className = 'vjs-big-play-centered ';
|
||||||
|
|
||||||
// show large play button when paused on ios
|
// show large play button when paused on ios
|
||||||
// if (IS_IOS) {
|
// if (IS_IOS) {
|
||||||
|
|
|
@ -109,6 +109,11 @@ function VideoViewer(props: Props) {
|
||||||
breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
|
breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const IS_IOS =
|
||||||
|
(/iPad|iPhone|iPod/.test(navigator.platform) ||
|
||||||
|
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
|
||||||
|
!window.MSStream;
|
||||||
|
|
||||||
// force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
|
// force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (uri && previousUri && uri !== previousUri) {
|
if (uri && previousUri && uri !== previousUri) {
|
||||||
|
@ -247,16 +252,22 @@ function VideoViewer(props: Props) {
|
||||||
if (typeof error === 'object' && error.name && error.name === 'NotAllowedError') {
|
if (typeof error === 'object' && error.name && error.name === 'NotAllowedError') {
|
||||||
console.log('running here!');
|
console.log('running here!');
|
||||||
if (player.autoplay() && !player.muted()) {
|
if (player.autoplay() && !player.muted()) {
|
||||||
|
if(IS_IOS){
|
||||||
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
||||||
player.muted(true);
|
player.muted(true);
|
||||||
|
}
|
||||||
|
|
||||||
// another version had player.play()
|
// another version had player.play()
|
||||||
player.play();
|
player.play();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log('other block conditional');
|
console.log('other block conditional');
|
||||||
player.muted(true);
|
if(IS_IOS){
|
||||||
player.play();
|
|
||||||
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
|
||||||
|
player.muted(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
player.play();
|
||||||
}
|
}
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
setIsPlaying(false);
|
setIsPlaying(false);
|
||||||
|
|
Loading…
Reference in a new issue