Changes to improve videojs playing experience on iOS #7058

Closed
mayeaux wants to merge 2 commits from fix-videojs-ios into master
3 changed files with 37 additions and 6 deletions

View file

@ -151,8 +151,8 @@ const onPlayerReady = (player, options) => {
* Never shows if the endscreen plugin is present
*/
const mobileUi = function(options) {
// if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
if (videojs.browser.IS_ANDROID) {
// target both iOS and Android
if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
this.ready(() => {
infinite-persistence commented 2021-09-30 03:56:04 +02:00 (Migrated from github.com)
Review

This comment feels redundant, since the variables are self-explanatory.

This comment feels redundant, since the variables are self-explanatory.
onPlayerReady(this, videojs.mergeOptions(defaults, options));
});

View file

@ -283,10 +283,10 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// as the listener to update static texts.
const setLabel = (controlBar, childName, label) => {
const c = controlBar.getChild(childName);
if (c) {
c.controlText(label);
}
// const c = controlBar.getChild(childName);
// if (c) {
// c.controlText(label);
// }
};
const player = playerRef.current;

View file

@ -110,6 +110,12 @@ function VideoViewer(props: Props) {
previousListUri,
videoTheaterMode,
} = props;
const IS_IOS =
(/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream;
const permanentUrl = claim && claim.permanent_url;
const adApprovedChannelIds = homepageData ? getAllIds(homepageData) : [];
const claimId = claim && claim.claim_id;
@ -335,6 +341,31 @@ function VideoViewer(props: Props) {
// player.muted(true);
// another version had player.play()
}
console.log('running here!')
} else {
console.log('running here123')
const isPaused = player.paused();
console.log('is paused');
console.log(isPaused)
if (IS_IOS && isPaused) {
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
player.muted(true);
const iosResponse = player.play();
console.log(iosResponse)
}
setTimeout(function(){
console.log('running here124')
const isPaused = player.paused();
infinite-persistence commented 2021-09-30 03:57:27 +02:00 (Migrated from github.com)
Review

Lint

Lint
console.log('is paused');
console.log(isPaused)
if (IS_IOS && isPaused) {
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
player.muted(true);
const iosResponse = player.play();
console.log(iosResponse)
}
}, 1000)
}
setIsLoading(false);
setIsPlaying(false);