Scene7 dynamic media

[Keerthi0555]

Hi Everyone,

I'm using scene7 api for videos the videos are playing on all devices but for iphone the videos are playing only when we referesh page when we switch between tabs the video is not playing only when we referesh the page the video is playing this issue is only on iphone any solution to this?

[pulkitvashisth]

Here are some troubleshooting steps specifically for AEM Dynamic Media:

1. Check Dynamic Media Configuration: Make sure that your AEM administrator has enabled and configured Dynamic Media Cloud Services in either Dynamic Media - Scene7 mode or Dynamic Media - Hybrid mode.
2. Check Video Encoding: Before you reload the video, ensure that the Dynamic Media Encode Video workflow is not running. If the video is not encoded, check whether Dynamic Media Cloud Service is configured and whether a video profile is associated with the upload folder.
3. Check Asset Properties: Confirm the successful synchronization of the asset from Adobe Experience Manager to Dynamic Media by reviewing certain asset properties in CRXDE Lite.
4. Reupload the Video: If the video still doesn’t play, try reuploading it.

reference : https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/assets/dynamicmedia...

[Raja_Reddy · Accepted solution]

Hi @Keerthi0555 
Please try below 2 examples
Ex1:

Check if the issue is related to caching. It's possible that the video is being cached on the iPhone and not being refreshed when switching between tabs. You can try adding a cache-busting parameter to the video URL to force the browser to fetch a fresh copy of the video each time it's played.

Check if the issue is related to the video format. iPhones have specific requirements for video playback, so it's possible that the video format being used is not compatible with iOS. You can try converting the video to a different format that is known to work well on iPhones.

Check if the issue is related to the video player. It's possible that the video player being used is not compatible with iOS. You can try using a different video player or updating the existing player to a newer version that is known to work well on iPhones.
 

Ex2:

Safari has strict autoplay policies. Ensure that your video elements comply with these policies. Autoplaying videos are generally allowed only if muted. If your videos are not muted, consider adding the muted attribute to your video elements.

-----------
<video muted controls>
<source src="your_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

--------------------
Page Visibility API:
Safari and other browsers may pause background tabs to conserve resources. You can use the Page Visibility API to check if the tab is visible before playing the video.

----------------------

document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'visible') {
// Code to play the video
}
});

---------------------------
iOS Specific Considerations:
iOS devices may behave differently, and there could be limitations or issues specific to Safari on iOS. Ensure that your videos are encoded using formats and settings that are well-supported on iOS. H.264 is a commonly supported video codec on iOS devices.

Thanks.

[kautuk_sahni]

@Keerthi0555 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[Madhur-Madan]

Hi @Keerthi0555 ,
Consider using inline playback (playsinline) and specifying controls to allow playback control, which might help in certain situations.

<video autoplay muted playsinline controls>
    <!-- Your video source here -->
</video>

Or you can go with vanilla Js to check for iOS and implement the logic below

const isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

if (isIOS) {
    //This is an iOS device.
    document.addEventListener("visibilitychange", function() {
        if (document.visibilityState === 'visible') {
            // Play the video
            document.getElementById('yourVideo').play();
        } else {
            // Pause or handle as needed
            document.getElementById('yourVideo').pause();
        }
    });
}

 
Let me know if it works for you.

Thanks