magento2: Unable to Play Videos on Mobile Devices

Preconditions

Magento 2.4-develop

Description

When attempting to play product videos on various mobile devices, such as Android and iPhone, as well as in the mobile view mode of the Chrome browser on a desktop, the videos are not played and not showing any errors in the console. The video is working properly in desktop view.

Screenshot-1 image (18)

Steps to reproduce

Create a product with Images and video.
Visit the product in store front using mobile device or mobile view mode of the Chrome browser on desktop.
Play video.

Expected result

Video will be play on any mobile devices or view mode of the Chrome browser.

Actual result

Video is not played on mobile device.

Additional information

This issue arise after merge Fix broken fotorama image slider on mobile Fixes #37232 #37355 PR. In this PR solved issue with fotorama Image slider on mobile. In Magento 2.4.6-p2 there are not having issue with the video on mobile devices.

File name: Fotorama.js

Line 1143: el.addEventListener ? el.addEventListener(e, fn, {passive: !!bool}) : el.attachEvent('on' + e, fn);

In this line, added {passive: !!bool} for sloving slider issue but it affected on video played in mobile. due to this it started causing an issue with the video played on moble. If we revert the {passive: !!bool} to !!bool as per magento 2.4.6-p2 video is played on mobiles but slider issue will cause a problem.

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 1
Comments: 15

Most upvoted comments

Hi @Kashyap1999

Thank you for reporting and collaboration. Verified the issue on Magento 2.4-develop instance and the issue is confirmed as the product videos are not played and not showing any errors in the console on mobile devices.

Please refer the attached video evidences.

https://github.com/magento/magento2/assets/60198592/630b9b10-bff0-43d0-9529-8e5b6a47d760

Thanks

engcom-Dash on Nov 3, 2023

@stephensfisheye

Thank you! I tested your fix. It’s working, but we have another issue that related to this: (The click/tap goes through) https://github.com/magento/magento2/issues/34886

If I use this fix and your fix. The issue of “Close button” returns again.

Perhaps the whole thing really should be looked at more closely and fixed. This is just for information, so that other problems can be looked at in context.

oa-netigo on Nov 8, 2023

I’ve had the same issue and through investigation I’ve created the following patch. This resolves the issue for the 2.4.6-p3 site I’m working on, with the other Fotorama fixes (#37355 and #36578) also applied as patches.

38137-fotorama-mobile-videos-slider.patch

Essentially the fix is to remove the following line: https://github.com/magento/magento2/blob/c333d3253d220834148d1b4a36ff6fe56cea57e2/lib/web/fotorama/fotorama.js#L1484

This seems to have stemmed from the change in the addEvent function applying the bool argument to the passive option for addEventListener, instead of the useCapture argument as it previously did. Referencing: 3598333616d066c4ce4ea2fb8daed53d35f680b6

This feels like more of a ‘workaround’ than a full solution and therefore may require a more robust/better approach. However, I haven’t experienced any problems/different behaviour when testing the patch in Chrome, Firefox or Safari.

stephensfisheye on Nov 7, 2023