Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Why doesn't WordPress video play also without autoplay?

On my webpage there is only a video. It is playing well on Edge but not on Mobile Device and Chrome.

  • the video is .mp4
  • autoplay is disabled
  • I am using OceanWP theme but I tried also Astra theme without any success
  • I am using Elementor to edit the page

There are many questions on this topic but none of them has a solution that fixes my problem.

enter image description here

EDIT

enter image description here

Tags:

2

Answers


  1. 0

    From the official Apple WebKit documentation (iOS):

    Starting in iOS 10, WebKit relaxes its inline and autoplay policies to
    make these presentations possible, but still keeps in mind sites’
    bandwidth and users’ batteries.

    By default, WebKit will have the following policies:

    • video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
    • video muted elements will also be allowed to autoplay without a user gesture. If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.

    https://webkit.org/blog/6784/new-video-policies-for-ios/

    As for Mobile Chrome (Android):

    Muted autoplay for video is supported by Chrome for Android as of
    version 53. Playback will start automatically for a video element once
    it comes into view if both autoplay and muted are set, and playback of
    muted videos can be initiated progamatically with play(). Previously,
    playback on mobile had to be initiated by a user gesture, regardless
    of the muted state.

    https://developers.google.com/web/updates/2016/07/autoplay

    Example:

     <video id="myVideo"muted defaultMuted autoplay playsinline controls>
     <source src="myVideo.mp4" type="video/mp4">
 </video>
    Login or Signup to reply.
  2. 0

    Your video preview shows the video file is not working. You should see a thumbnail of the video file such as this:

    Working example

    I’m not sure why, but it could be that the file on the server was moved/renamed/deleted since you added the video to this page. One explanation it is working on Edge but not mobile is perhaps the image was cached previously on the Edge browser.

    If you remove the image and try to re-add it through Elementor, can you reproduce the problem?

    Another idea is you may have a slightly corrupted video file. Try editing it in any video-editing program (several free online ones) and see if exported file works in your page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search