diff --git a/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js b/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js index 8bb9e0d23..9fa1ed760 100644 --- a/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js +++ b/ui/component/viewers/videoViewer/internal/plugins/videojs-mobile-ui/plugin.js @@ -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(() => { onPlayerReady(this, videojs.mergeOptions(defaults, options)); }); diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index 905187ded..6f2226c80 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/ui/component/viewers/videoViewer/view.jsx @@ -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,13 @@ function VideoViewer(props: Props) { // player.muted(true); // 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); setIsPlaying(false);