Unable to Play Videos on Mobile Devices

[Kashyap1999]

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

Steps to reproduce

1. Create a product with Images and video.
2. Visit the product in store front using mobile device or mobile view mode of the Chrome browser on desktop.
3. 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.

[m2-assistant]

Hi @Kashyap1999. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

• @magento give me 2.4-develop instance - upcoming 2.4.x release
• For more details, review the Magento Contributor Assistant documentation.
• Add a comment to assign the issue: @magento I am working on this
• To learn more about issue processing workflow, refer to the Code Contributions.

---

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

[m2-assistant]

Hi @engcom-Bravo. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
• 5. Add label Issue: Confirmed once verification is complete.
• 6. Make sure that automatic system confirms that report has been added to the backlog.

[m2-assistant]

Hi @engcom-Dash. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

• 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
• 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
• 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
• 4. Verify that the issue is reproducible on 2.4-develop branch
     Details

     - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
     - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
     - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[engcom-Dash]

@magento give me 2.4-develop instance

[magento-deployment-service]

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @engcom-Dash, here is your Magento Instance: https://c161bc48363ce357765b749073a58421.instances-prod.magento-community.engineering
Admin access: https://c161bc48363ce357765b749073a58421.instances-prod.magento-community.engineering/admin_9cb6
Login: 3d03a5c4
Password: 61e8a4449877

[engcom-Dash]

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.

video.mov

Thanks