Changes to improve videojs playing experience on iOS #7058

Closed
mayeaux wants to merge 2 commits from fix-videojs-ios into master
2 changed files with 15 additions and 2 deletions
Showing only changes of commit 9065b44a72 - Show all commits

View file

@ -151,8 +151,8 @@ const onPlayerReady = (player, options) => {
* Never shows if the endscreen plugin is present * Never shows if the endscreen plugin is present
*/ */
const mobileUi = function(options) { const mobileUi = function(options) {
// if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) { // target both iOS and Android
if (videojs.browser.IS_ANDROID) { if (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS) {
this.ready(() => { 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)); onPlayerReady(this, videojs.mergeOptions(defaults, options));
}); });

View file

@ -110,6 +110,12 @@ function VideoViewer(props: Props) {
previousListUri, previousListUri,
videoTheaterMode, videoTheaterMode,
} = props; } = 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 permanentUrl = claim && claim.permanent_url;
const adApprovedChannelIds = homepageData ? getAllIds(homepageData) : []; const adApprovedChannelIds = homepageData ? getAllIds(homepageData) : [];
const claimId = claim && claim.claim_id; const claimId = claim && claim.claim_id;
@ -335,6 +341,13 @@ function VideoViewer(props: Props) {
// player.muted(true); // player.muted(true);
// another version had player.play() // another version had player.play()
} }
} else {
const isPaused = player.paused();
if (IS_IOS && isPaused) {
document.getElementsByClassName('video-js--tap-to-unmute')[0].style.visibility = 'visible';
player.muted(true);
const iosResponse = player.play();
}
} }
setIsLoading(false); setIsLoading(false);
setIsPlaying(false); setIsPlaying(false);