autoplay video in IOS devices

jhonc66
jhonc66 used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Can you show us your code.
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.
Fractional CTO
Distinguished Expert 2018
Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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

Author

Commented:
Thank you, David Favor.
David FavorFractional CTO
Distinguished Expert 2018

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial