autoplay video in IOS devices

Hi,

Can someone help me with a sample code to Autoplay a HTML video on IOS. I have a video that used to autoplay in IOS but not anymore, also how would I autoplay and start the video from a different position

i.e 40 seconds before the end.
jhonc66Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Can you show us your code.
lenamtlCommented:
Hi,

try this

<video src="/video.mp4" loop autoplay playsinline poster="/poster.png">
</video>

Open in new window


be aware that video most of the time won't auto play on mobile device, as user may have some device setting to prevent this or browser settings.
Always put a poster so if any compatibility problem user will at least see something.
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Sigh... All major browsers block autoplay in recent versions + each time someone figures out a work around, next browser release blocks the work around.

Here's what works now + some notes about the future.

1) This is the only autoplay option set that works in most recent browsers.

<video autoplay muted>

Open in new window


2) You may alternately include loop and/or controls too.

3) If you leave out muted, this automatically disables autoplay.

4) This works today + current browser dev channels suggest even this will go away shortly.

Best to avoid site designs which rely on autoplay videos.

5) All Javascript attempts to start videos fail with various exceptions (for latest stable browsers).

You can work around this with older browsers + as soon as a visitor updates, this ability dies with their browser update.

6) This applies to all devices at this point - mobile + desktop.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

jhonc66Author Commented:
Hi All, thank you for answering, below is the code I am using.

Autoplay is working in android and desktop. but not on IOS. I will test the above solutions and get back to you.

<video id="VideoResult" class="video-js vjs-default-skin" height="360" width="640" preload="" controls="" autoplay="">
                    <source src="http://mediarnsw.skyracing.com.au/Race_Replay/2019/02/20190218BALR01_V.mp4" type="video/mp4">
			        <p class="vjs-no-js">To view the video, you need to get the latest <a href="http://www.adobe.com/go/getflash/" target="_blank">Adobe Flash Player</a>. After installing, please close this browser window and click the video replay again.</p>
		        </video>

Open in new window

jhonc66Author Commented:
Thank you, David Favor.
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
After thought: There is a work around for this problem.

The fix can be fairly time intensive to get working + generally never works as good as looping videos + in the future, this may be the only solution.

Convert your video to an animated image, as follows.

1) Build latest ffmpeg version from source.

2) Run ffmpeg to split entire video into set of frames. If you have a 10 second, 30fps video, you'll end up with 300 frames.

3) Running the ffmpeg split, output the frames in the exact image type you're targeting, so if your final image will be a .apng, then you'll use .png images for your split.

4) Apply a common compression algorithm to all your .png files.

5) Now stitch the image files back together using ImageMagick, something like this...

convert -delay 1-loop 0 sphere*.png animated.apng

Open in new window


It's been several years since I had to do this, so ffmpeg syntax + ImageMagick syntax has likely changed, so if you go this route, best research best approach... which also means... there may be other tools available to stitch together images into your final output image.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
iOS

From novice to tech pro — start learning today.