safari video autoplay muted

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Autoplay guide for media and Web Audio APIs

Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. In this guide, we'll cover autoplay functionality in the various media and Web Audio APIs, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.

Autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be audible , and autoplay blocking applies to them. Inaudible media are not affected by autoplay blocking.

Autoplay and autoplay blocking

The term autoplay refers to any feature that causes media to begin to play without the user specifically requesting that playback begin. This includes both the use of HTML attributes to autoplay media as well as the use of JavaScript code to start playback outside the context of handling user input.

That means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy:

The following web features and APIs may be affected by autoplay blocking:

• The HTML <audio> and <video> elements
• The Web Audio API

From the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. Because of that, browsers generally only allow autoplay to occur successfully under specific circumstances.

Autoplay availability

As a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true:

• The audio is muted or its volume is set to 0
• The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
• If the site has been allowlisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• If the autoplay Permissions Policy is used to grant autoplay support to an <iframe> and its document.

Otherwise, the playback will likely be blocked. The exact situations that result in blocking, and the specifics of how sites become allowlisted, vary from browser to browser, but the above are good guidelines to go by.

For details, see the autoplay policies for Google Chrome and WebKit .

Note: Put another way, playback of any media that includes audio is generally blocked if the playback is programmatically initiated in a tab which has not yet had any user interaction. Browsers may additionally choose to block under other circumstances.

Autoplay of media elements

Now that we've covered what autoplay is and what can prevent autoplay from being allowed, we'll look at how your website or app can automatically play media upon page load, how to detect when autoplay fails to occur, and tips for coping when autoplay is denied by the browser.

The autoplay attribute

The simplest way to automatically play content is to add the autoplay attribute to your <audio> or <video> element, which sets the autoplay property on the element to true . When autoplay is true , the media will automatically begin to play as soon as possible after the following have occurred:

• The page is allowed to use autoplay functionality
• The element has been created during page load
• Enough media has been received to begin playback and continue to play through to the end of the media without interruption, assuming there are no dramatic changes in network performance or bandwidth.

Example: The autoplay attribute

An <audio> element using the autoplay attribute might look like this:

Example 2: Detecting whether autoplay is allowed

If autoplay is important for your application, you may need to customize behavior based on whether or not autoplay is allowed, disallowed, or only supported for inaudible content. For example, if your application needs to autoplay a video and you know that the page only allows the autoplay of inaudible content, you can either mute it or supply a video with no audio track. Similarly, if you know that autoplay is not allowed at all, you might provide a default image for the video (using the poster attribute), or choose to defer loading the video until it is requested.

The Navigator.getAutoplayPolicy() method can be used to check the autoplay policy for a type of media feature (i.e. all media elements, or all audio contexts) in a document, or to check whether a specific media element or audio context can autoplay.

The example below shows how you pass the mediaelement string to get the autoplay policy for all media elements in the document (pass audiocontext to get the policy for audio contexts). The code assumes video is an HTMLVideoElement media element using the <video> tag or HTMLVideoElement , and that it is configured to autoplay with audio by default. If autoplay is only allowed for inaudible content, we mute the audio; if autoplay is disallowed, we make sure that a placeholder image is displayed for the video.

The code to test a specific element or audio context is the same, except that you pass in the element or context to test rather than the type string. Here we pass in the video object we want to test.

The autoplay policy for a type may change due to user interaction with the site, page, or a particular element. Similarly, on some browsers the policy for a specific element might change even though the policy for the type has not (for example, on browsers where touching a particular element can allow just that element to autoplay).

As there is no way to be notified when the autoplay policy has changed (either for a type or element), generally we recommend that the policy is checked when the page is loaded, using the type.

Example 3: Detecting autoplay failure as a fallback

No specific event (or other notification) is triggered by autoplay success or failure, so browsers that do not support Navigator.getAutoplayPolicy() have no easy way to determine if autoplay is supported, or to react when it is triggered or not triggered.

One approach is to listen for the first instance of the play event, which is fired on the media element when is resumed after being paused and when autoplay occurs. That means that the first time the play event is fired, you know your media is being started for the first time after the page is opened,

Consider this HTML for a media element:

Here we have a <video> element whose autoplay attribute is set and with a play event handler set up; the event is handled by a function called handleFirstPlay() , which receives as input the play event.

handleFirstPlay() looks like this:

After getting a reference to the video element from the Event object's target , we use it to remove the event listener. This will prevent any future play events from being delivered to the handler. That could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab.

At this point, your site or app can begin whatever it needs to do that relies upon the video having been started up.

The play() method

The term "autoplay" also refers to scenarios in which a script tries to trigger the playback of media that includes audio, outside the context of handling a user input event. This is done by calling the media element's play() method.

Note: It is strongly recommended that you use the autoplay attribute whenever possible, because support for autoplay preferences are more widespread for the autoplay attribute than for other means of playing media automatically. It also lets the browser take responsibility for starting playback, letting it optimize the timing of that taking place.

Example: Playing video

This simple example plays the first <video> element found in the document. play() won't let the playback begin unless the document has permission to automatically play media.

Example: Handling play() failures

It's much easier to detect a failure to autoplay media when you use the play() method to start it. play() returns a Promise which is resolved once the media successfully begins to play, and is rejected when playback fails to begin (such as if autoplay is denied). When autoplay fails, you likely will want to offer a way for the user to manually tell the browser to ask the user to grant permission to play media.

You might use code like this to accomplish the job:

The first thing we do with the result of play() is make sure it's not undefined . We check for this because in earlier versions of the HTML specification, play() didn't return a value. Returning a promise to allow you to determine success or failure of the operation was added more recently. Checking for undefined prevents this code from failing with an error on older versions of web browsers.

If the promise returned by play() is resolved without error, the then() clause is run and can begin whatever needs to be done when autoplay has begun.

We then add a catch() handler to the promise. This looks at the error's name to see if it's NotAllowedError . This indicates that playback failed due to a permission issue, such as autoplay being denied. If that's the case, we should present a user interface to let the user manually start playback; that's handled here by a function showPlayButton() .

Any other errors are handled as appropriate.

If you want to start playing the video after the first interaction with the page, setInterval() might be used to achieve this:

Autoplay using the Web Audio API

In the Web Audio API , a website or app can start playing audio using the start() method on a source node linked to the AudioContext . Doing so outside the context of handling a user input event is subject to autoplay rules.

The autoplay Permissions Policy

In addition to the browser-side management and control over autoplay functionality described above, a web server can also express its willingness to allow autoplay to function. The HTTP Permissions-Policy header's autoplay directive is used to control which domains, if any, can be used to autoplay media. By default, the autoplay Permissions Policy is set to self , indicating that autoplay is permitted as they're hosted on the same domain as the document.

You can also specify an empty allowlist ( () ) to disable autoplay entirely, * to allow autoplay from all domains, or one or more specific origins from which media can be automatically played. These origins are separated by space characters.

Note: The specified Permissions Policy applies to the document and every <iframe> nested within it, unless those frames include an allow , which sets a new Permissions Policy for that frame and all frames nested within it.

When using the allow attribute on an <iframe> to specify a Permissions Policy for that frame and its nested frames, you can also specify the value 'src' to allow autoplay of media only from the same domain as that specified by the frame's src attribute.

Example: Allowing autoplay only from the document's domain

To use the Permissions-Policy header to only allow media to autoplay from the document's origin :

To do the same for an <iframe> :

Example: Allowing autoplay and fullscreen mode

Adding Fullscreen API permission to the previous example results in a Permissions-Policy header like the following if fullscreen access is allowed regardless of the domain; a domain restriction can be added as well as needed.

The same permissions, granted using the <iframe> element's allow property, look like this:

Example: Allowing autoplay from specific sources

The Permissions-Policy header to allow media to be played from both the document's (or <iframe> 's) own domain and https://example.media looks like this:

An <iframe> can be written to specify that this autoplay policy should be applied to itself and any child frames would be written thusly:

Example: Disabling autoplay

Setting the autoplay Permissions Policy to () / none disables autoplay entirely for the document or <iframe> and all nested frames. The HTTP header is:

Using the <iframe> 's allow attribute:

Best practices

Tips and recommended best practices to help you make the most of working with autoplay are offered here.

Handling autoplay failure with media controls

A common use case for autoplay is to automatically begin to play a video clip that goes along with an article, an advertisement, or a preview of the page's main functionality. To autoplay videos like these, you have two options: don't have an audio track, or have an audio track but configure the <video> element to mute the audio by default, like this:

This video element is configured to include the user controls (typically play/pause, scrubbing through the video's timeline, volume control, and muting); also, since the muted attribute is included, and the playsinline attribute that is required for autoplay in Safari, the video will autoplay but with the audio muted. The user has the option, however, of re-enabling the audio by clicking on the unmute button in the controls.

Browser configuration options

Browsers may have preferences that control the way autoplay works, or how autoplay blocking is handled. Here, any such preferences that may be of special significance or importance to you as a web developer are listed. These include any that may aid in testing or debugging as well as any that could be set in a way that you need to be prepared to handle.

A Boolean preference which specifies whether the HTMLMediaElement.allowedToPlay property is exposed to the web. This is currently false by default (except in nightly builds, where it's true by default). If this is false , the allowedToPlay property is missing from the HTMLMediaElement interface, and is thus not present on either <audio> or <video> elements.

This Boolean preference, if true , allows browser extensions' background scripts to autoplay audio media. Setting this value to false disables this capability. The default value is true .

A Boolean preference which if true (the default) allows audio media which is currently muted to be automatically played. If this has been changed to false , media with an audio track will not be permitted to play even if muted.

A Boolean preference that indicates whether to apply autoplay blocking to the Web Audio API . If false , web audio is always allowed to autoplay. If true , audio contexts are only able to play on pages once there has been Sticky activation . The default is set to true .

An integer preference which specifies whether per-domain configuration for autoplay support by default is allowed ( 0 ), blocked ( 1 ), or prompt-on-use ( 2 ). The default value is 0 .

A Boolean preference which controls whether detection of user gestures is allowed to override the setting of media.autoplay.default . If media.autoplay.default is not set to 0 (autoplay allowed by default), this preference being true allows autoplay of media with audio tracks anyway if the page has been activated by user gestures, and media that isn't audible is not restricted at all.

A Boolean preference which indicates whether media playback is blocked when started on a background tab. The default value, true , means that even when otherwise available, autoplay won't take place until after a tab is brought to the foreground. This prevents the distracting situation in which a tab begins playing sound and the user can't find the tab among all their tabs and windows.

• Web media technologies
• Video and audio content (Learning guide)
• Using the Web Audio API
• Cross-browser audio basics

Safari User Guide

• Get started
• Go to a website
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Import bookmarks and passwords
• Pay with Apple Pay
• Autofill credit card info
• View links from friends
• Keep a Reading List
• Hide ads when reading
• Translate a webpage
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Stop autoplay videos in Safari on Mac

Some websites—and others who provide those sites with content, including advertisers—automatically play video when you visit their site. Muting tabs and windows is a quick and temporary solution, but you can permanently block video for an individual website or for all websites.

Open Safari for me

Block video for the currently displayed website

You can also Control-click in the Smart Search field , then choose Settings for [ website ].

Hold the pointer to the right of Auto-Play, then click the pop-up menu and choose an option:

Allow All Auto-Play: Lets videos on this website play automatically.

Stop Media with Sound: Blocks autoplay for videos that contain audio, but allows other videos to play.

Never Auto-Play: Blocks autoplay for all videos on this website.

Block video for all websites

Click Auto-Play in the list on the left.

Do any of the following:

Choose settings for a website in the list: Select the website on the right, then choose the option you want for it.

Choose settings for all websites that aren’t currently customized: Click the “When visiting other websites” pop-up menu, then choose an option.

You can see websites you’ve customized below Configured Websites. If you don’t see Configured Websites, either you haven’t customized a website yet, or you’ve cleared the list.

Choose settings for all websites: Make sure no websites are listed below Configured Websites (to clear the list quickly, select the websites, then click Remove). Click the “When visiting other websites” pop-up menu, then choose an option.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Stop web videos autoplaying in Safari iPados

Since upgrading my iPad to iPados my usual news site autoplays videos on every page, when it never used to autoplay before the update. I cannot find anywhere to turn it off. Can anyone help please?

Posted on Sep 27, 2019 3:01 AM

Posted on Oct 2, 2019 7:51 PM

I'm having the same issue -- installed iPadOS and now videos autoplay in Safari (muted, mercifully). They did not before the upgrade. How do I make it stop?

I do not see an appropriate setting for Safari, only an "autoplay" option for Photos (which has no effect on Safari). Also no impact for Settings > Accessibility > Motion > Autoplay Video Previews.

Where is the relevant setting buried?

Similar questions

• Stopping Autoplay Videos on Safari!!! On Jun 11, 2021, someone posted the question: “Is there a way on ios 14.8.1 to stop videos in Safari that plays automatically?” Apple support suggested going to: “Settings > Accessibility > Motion > disable the option Auto-Play Video Previews.” However, someone else noted: “…disabling the option Auto-Play Video Previews does not help at all. Every single website under my safari app will still happily play their videos even though I have this “Auto-Play Video Previews” disabled. It has always been disabled and it does nothing. It is eating up my cellular data. Can you advise something that works please?” This is my problem as well. Apple Support has STILL NOT RESOLVED THIS ISSUE.  But if it continues, I will be forced to DELETE the Safari browser from my phone and use an alternative, because in addition to eating up data limits, IT IS ANNOYING!!! [Edited by Moderator] 7768 2
• Is there any way to stop videos from automatically playing? I have limited data and really don't want to watch most of the videos out there. Is there a way to stop them from automatically playing in Safari? 511 4
• Autoplay videos I am running IOS 12.2 on my Ipad pro and would like to know how to disable autoplay videos in the Safari browser. Any help would be very much appreciated as this is very annoying. If I wanted to watch a video I would simply hit the play button. Sometimes these videos can not be paused, forcing me to watch a one minute commercial leading into a 30 second video, wasting my data, and my time... 2083 1

Loading page content

Page content loaded

Oct 2, 2019 7:51 PM in response to FatCol

Oct 2, 2019 10:35 PM in response to FatCol

Besides turning off Auto-Play Video Previews in Motion, you also need to turn off Video Autoplay in iTunes & App Store, pls watch this YouTube tutorial video (starting from 1:00): https://youtu.be/a2saDSACxxY

Hope this resolves your issue.

Sep 29, 2019 12:56 AM in response to QuickPost

I've already looked in Settings>Safari but I cannot see any option to stop videos from autoplaying.

Do you know of any way to prevent autoplaying of videos?

Oct 4, 2019 10:49 PM in response to present tense

Hi present tense,

Pls refer to the attached photos. Pls switch Video Autoplay off.

Hope this helps.

Oct 6, 2019 10:38 AM in response to GOldAPPle78

Hi GOldAPPle78, thanks -- but there is NO Video Autoplay option in my Settings (see below). Perhaps this is different in iPadOS versus whatever version of iOS you're using?

Sep 27, 2019 10:27 AM in response to FatCol

You can manage Safari website settings in Settings > Safari.

Oct 2, 2019 9:55 PM in response to present tense

Safari on iPadOS identifies itself to websites as a desktop browser by default. Perhaps your favorite new site thinks autoplaying to a desktop computer is OK but not to mobile devices.

Oct 4, 2019 1:57 PM in response to GOldAPPle78

GOldAPPle78, I do not see a video option in iTunes & App Store

Oct 6, 2019 12:03 PM in response to present tense

I find if I tap the AA symbol next to the web address and request the mobile site it tends to stop the auto playback of video.

Oct 7, 2019 5:45 AM in response to present tense

Mine has Video Autoplay, I just upgraded my iOS, now is 13.1.2

• Apple Watch
• Accessories
• Digital Magazine – Subscribe
• Digital Magazine – Info
• Smart Answers
• Let Loose iPad event
• New iPad Air
• iPad mini 7
• Best Mac antivirus
• Best Mac VPN

When you purchase through links in our articles, we may earn a small commission. This doesn't affect our editorial independence .

How to stop autoplay video in Safari & Chrome on Mac

Autoplay videos are a frustrating element of the modern web experience. You open a web page and just as you start reading the article, noise starts blaring out of your speakers; or, if the site is comparatively merciful, the sound is muted, but there’s still a distracting video (frequently an advert) playing off to one side of the page. Sometimes the autoplaying video is hard to find, or the button to stop it playing doesn’t seem to work.

Macworld itself has hosted autoplaying videos (it’s possible, through a grand cosmic irony, that a video is autoplaying on this article at this very moment…) so we are not going to try to take the moral high ground; and we of course appreciate that free sites need to be funded. But at the same time we understand browsers’ pain.

In this article we show how to stop autoplay videos in the Safari browser on your Mac and make your own browsing experience less annoying.

We’ve split this tutorial into sections, based on the browser you’re using. We cover Safari, Apple’s own browser, and the popular alternatives Google Chrome and Firefox. And we also look separately at the updated version of Safari in High Sierra , Apple’s latest version of macOS, which adds a far simpler anti-autoplay tool. Finally we show how to kill autoplaying videos on Facebook. If you want to kill this feature on Netflix, see How to turn off Netflix autoplay .

If you’d like to see more tips about using Safari on a Mac read our guide to using Safari on a Mac here.

Safari 11 (High Sierra, Sierra and El Capitan)

If you’re using Safari 11, which has now been released for macOS Sierra and El Capitan as well as for High Sierra, autoplaying video that has audio will (usually) be blocked automatically.

In our tests we’ve found that Safari doesn’t do a brilliant job of telling you what’s happened and why: one autoplay video with a ‘pre-roll’ advert just hung on the page and didn’t start playing. The message ‘Your video begins in 20 seconds’ remained there permanently, which could be confusing if you didn’t know what Safari was up to.

Note that many autoplay video adverts are set up – supposedly for the sake of the user – to play with sound muted by default, and these will open and play normally unless you take other action.

If Safari hasn’t updated to version 11 automatically, open the Mac App Store and look under the Updates tab – you should see Safari listed there. Install the update, then reopen Safari and you should find that the new features (which include more customisable content blockers, performance tweaks and more, as well as the autoplay blocker) have taken effect.

Also, read our comparison of all the web browsers available for Mac here: Best Mac Web Browser . 

Safari (macOS High Sierra)

A new feature in macOS 10.13 ‘High Sierra’ makes it very easy to selectively block autoplay videos in Safari.

When on a website that has autoplayed videos (it doesn’t need to be autoplaying one right this second), click Safari in the top menu bar, and then select ‘Settings for This Website’. Alternatively, you can right-click the URL box and, again, select ‘Settings for This Website’.

However you access this option, a dialogue box will pop up below the URL box. Hover your cursor over Auto-Play, the last option on the list, and it will turn into a menu with three choices: you can choose to ‘Allow All Auto-Play’, ‘Stop Media with Sound’ or ‘Never Auto-Play’.

Once you’ve made your choice, click elsewhere to make the box disappear. (If you have a change of heart you can go back at any time and change your settings for the site.)

Note that you’ll still be able to watch videos on the chosen site – they’ll just have a play button now, instead of playing spontaneously. For more advice of this kind, read our roundup of Safari tips for Mac .

Safari (Sierra and earlier)

Safari has a debug menu that can be used to stop autoplaying video, but first we need to activate the debug menu using Terminal.

Quit Safari (hit Cmd + Q, or click Safari > Quit Safari), and then open the Terminal app (you’ll find it in Applications > Utilities). Enter the following text, then hit return.

defaults write com.apple.Safari IncludeInternalDebugMenu 1

Close Terminal, and reopen Safari. You’ll see a new option at the righthand end of the top menu bar: Debug. Click this, then select Media Flags > Disallow Inline Video.

That’s it! (If you want to get rid of that Debug menu option, go back to Terminal and enter

defaults write com.apple.Safari IncludeInternalDebugMenu 0

Perhaps because its business model is advertising-based, Google currently appears less inclined than Apple to help you block autoplay videos in Chrome. Fortunately, the company’s customisation-friendly approach means it’s fairly easy to install a third-party tool to do the same thing.

Your best bet is probably to install a free Chrome extension called Disable HTML5 Autoplay . Click ADD TO CHROME, then when the dialogue box asks “Add Disable HTML5 Autoplay?”, click ‘Add extension’.

You’ll see a small icon (a red octagon with a white triangle in it) appear to the right of your URL/search bar. Click this, and from the resultant dropdown menu select ‘Disable autoplay’ so that it turns green. The icon should now be a darker red, showing

(We found it awkward at dealing with currently open tabs – we activated the blocker in one tab but then had to go through other and repeat the process. However, new tabs were set to block autoplay. If you want autoplay blocked in multiple tabs we recommend closing down Chrome and restarting, remembering to set the first one to block.)

How to disable flash video in Chrome

Because the extension deals with HTML 5, flash-based video may still be able to autoplay – this is particularly likely to be the case with Facebook videos, which at time of writing are still flash-based. (Note that we discuss specific settings to disable autoplay videos in Facebook in its own section later in this article.)

If you find the problem persists, you may wish to disable flash in Chrome settings.

In the top menu, click Chrome > Preferences to open the Settings menu. Scroll down and click Advanced at the bottom, then under ‘Privacy and security’, select Content Settings, and then Flash.

In this section you can click the top option and ‘Block sites from running Flash’, which should put paid to any remaining autoplay videos – but may wipe out some stuff you would like to access, and even videos that you’d like to play when you’re good and ready. For finer control you can add sites to specifically black- or whitelist.

If you’re using Firefox there are a variety of Flash-blockers available that you can find by choosing Tools > Add-ons, or by searching the add-ons page . One extension worth considering is Flashblock .

Here’s how to block autoplaying HTML5 videos in Firefox:

• Type about:config in the browser’s address bar. Hit enter, then click ‘I accept the risk!’ if you get the warning.
• Using the field at the top, search for media.autoplay.enabled.
• When you find that preference, double-click it and the entry for Value will change from true to false. Double-click again to change it back.

One of the places where you see autoplaying videos the most is on Facebook: it’s been designed in such a way that videos start playing (silently, in the past, although Facebook is apparently starting to change that) as soon as you scroll past them. If you want to disable these, you can do so easily in your account settings.

Click the downward-pointing arrow on the far right of the site’s top menu bar, and from the dropdown menu that appears, click Settings. Select Videos (the bottom option on the left) and next to ‘Autoplay Videos’, change the option to Off.

Note that, as the settings page warns, this applies only to when you view Facebook online. To disable autoplaying videos in the iOS app, tap the ‘hamburger’ icon at the bottom right of the screen, then go down to Settings > Account Settings > Videos and Photos > Auto-play. You can choose On Mobile Data and Wi-Fi Connections, On Wi-Fi Connections Only or Never Autoplay Videos.

Author: David Price , Editor

David has loved the iPhone since covering the original 2007 launch; later his obsession expanded to include iPad and Apple Watch. He offers advice to owners (and prospective owners) of these devices.

Recent stories by David Price:

• WWDC 2024: Everything you need to know
• How to tell if someone’s iPhone is on Do Not Disturb
• How to type a hashtag (#) on Mac

Video autoplay not working with muted inline.

I am trying to replace gifs with mp4s on my website. Currently its working great in Chrome and Firefox, but the behavior is odd in Safari.

This video is an h264 mp4 video with no audio track.

• Firefox, Chrome on my Macbook: Works as expected (autoplay's like it were a gif)
• iOS Safari without Low Power Mode: Works as expected
• iOS Safari with Low Power Mode: Autoplays but there is a play button on top that disappears when tapped.
• macOS Safari: Does not autoplay. A play button appears and it plays if clicked.

I have been following https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari as well as other guides on the internet and it still isn't working. I'm pretty sure there is a recent change responsible for this because it used to work in an older version of desktop safari.

I have a problem In the Safari browser the video not playing automatically regardless of the low power mode, Please my code below and let me know any changes to be done

<video id="banner-promo-player" playsinline="" defaultmuted="" autoplay="" muted="" src="****" ></video>

I have the same problem as well.

Safari is the Internet Explorer it is just doing weird things that's the normal thing for Safari :)

I have same problem in my site. My code looks like:

Only happens in low power mode. I think that the pause is forced due the low power mode but how we can consider an alternative background if this mode is enabled or how can we force it ?

The video will not auto-play if your device is in low power mode.

Oh my gosh! Thank you! You saved me!

thx, I was loosing my head trying to understand why the video wasn't auto playing

I got the same problem and I've read that IOS and even some MacOS systems do not support these kind of autoplay or some animation if you paid attention.

If you have visited the apple websites in some older Macbooks animation is not played

Bro, the most weird part over here is that on my M1 Mac Mini on Safari the video autoplays without any issues. But on my MacBook Pro, it's an issue for no evident reason 😢

DEV Community

Posted on Oct 17, 2019

How to fix autoplay html5 video on iOS?

If you have used Javascript to play an html5 video, you may encounter some errors, including this error:

or permission errors.

The reason is that browsers in recent years changed their policies to prevent autoplay video because they think users don't want it (that's correct in most cases).

What we can do to solve this issue?

• Add autoplay , muted and playsinline attributes to your <video> element.
• If you need sound, you should put an unmute button beside the video, then in onClick callback, get video element and set muted = false by Javascript.

Pro Tip! If you have multiple videos on your page and only a single unmute button, then make sure to unmute all videos in the click callback of that button, otherwise, iOS won't let you unmute video before playing it on demand.

That's it, happy autoplaying!

Top comments (2)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Aug 18, 2020

What if I don't want the video to autoplay?

• Joined Sep 4, 2019

In that case just don't add autoplay attribute to the video tag. Adding autoplay="false" or autoplay="true" are equal and will autoplay the video.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Join us for the Netlify Dynamic Site Challenge: $3,000 in Prizes!

dev.to staff - May 1

🧠 50 Articles for May the Fourth

Florian Rappl - May 3

What was your win this week?

Michael Tharrington - May 3

Building Your WordPress Dream Home on AWS EC2: A Step-by-Step Guide with Security in Mind 🎉

Abhinav Kumar - May 3

We're a place where coders share, stay up-to-date and grow their careers.

How to Stop Safari from Autoplaying Videos on Mac

Most of the time, it isn’t really a big deal when a video automatically starts playing on a website you are visiting. However, if you are in a place where you are expected to be quiet or if you are browsing while on a Zoom call, a video that automatically starts up when you don’t want it can be very disruptive. In this article, we will tell you how you can turn off video autoplay on your Mac.

Quickly mute a Safari tab (Mac) to mute a video

For some websites, if there is a video on one of their pages, it will automatically play when you open that page in your browser. For many websites, the videos you are most likely to encounter are ads. There are ways to quickly but temporarily mute the video sound. This can be useful if you haven’t disabled autoplay; however, muting a video that has already started playing means that you have probably already created a disruption (to your Zoom meeting).

iPhone and iPad

Unfortunately, there is no way to mute a Safari tab on your iPhone or iPad. What you can do instead is:

• Press and hold your volume down button to quickly dial down the volume.
• Use the video player’s controls: You may need to tap on the video to bring up controls, then press the sound button on the video controls to mute the video. You may also be able to press an X in the corner of the video to close it.
• Close your Safari app.

On your Mac, you can mute tabs in Safari . To mute unwanted sounds from a webpage in Safari, click on the Audio button in the Safari search field. It will be near the right side of the search field. To choose a particular tab to mute, click on the Audio button on the tab itself.

Disable video autoplay in Safari on Mac

You have the option to disable autoplay for just one website or for all websites.

To open the Auto-Play preferences:

• Open Safari on your Mac, then go to the top menu bar and Select Safari > Preferences .

• Click on the Websites tab near the top of the Preferences window. Select Auto-Play from the list on the left side of the window.

Block autoplay for all websites

• Allow All Auto-Play
• Stop Media with Sound
• Never Auto-Play
• Choose “Stop Media with Sound” or “Never Auto-Play” to stop videos (with sound) from autoplaying.

Block autoplay for the current website(s)

You can either block or allow autoplay for any particular website, independent of the preferences you have set for other websites.

• Your autoplay choice will only affect media on that website.

Related articles

• How To Disable Auto-Play Videos in Safari – macOS
• What Does Pinning a Tab Do in Safari?
• Bluetooth Speakers not Working with Mac? Here’s How to Fix
• How to Change System Sounds (empty trash, screenshot, sent message, etc) on Mac

Dr. Stacey Butler is a tech writer at macReports covering news, how-tos, and user guides. She is a longtime Mac and iPhone user and holds a Ph.D. from the University of Illinois at Champaign-Urbana. She is a former faculty member and a math teacher. Here is her LinkedIn profile , Google Scholar profile and her ResearchGate profile . Email Stacey Butler .

Similar Posts

How to send feedback to apple.

Do you have a comment or suggestion about an Apple product or service? Do you want to send your feedback to Apple? You can easily let Apple know about any problems you run into…

How To Change Default Search Engine in Safari (iOS and macOS)

If you use the Safari browser on your iOS devices (iPhone, iPad or iPod touch) and on your Mac; you can easily change your default search engine; so that when you search something, your…

“APL*ITUNES/BILL”, What Is This?

Do you see a charge that starts with “APL *” (like APL*ITUNES/BILL) in your billing or bank statement? This is an Apple purchase such as iOS or macOS apps, songs, movies, TV shows,…

How to use Quizlet Learn to Study for a Test on your iPhone

If you are a student (or a teacher) you have probably heard of Quizlet; It’s most famous as an app for flashcards. If you haven’t used Quizlet, it is so much easier and…

How To Watch Disney Plus On Your Apple TV

This article explains how you can get Disney Plus on your Apple TV. Currently, not all Apple TV models support Disney+. Disney Plus can be watched on Apple TV HD (4th gen or later)…

How to Move a File or Folder on Mac

Moving files or folders on your Mac can be a great way to organize your Mac. You can also move them to fix certain problems, such as the installation failed error. There are…

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories:

To revisit this article, visit My Profile, then View saved stories .

• Backchannel
• Newsletters
• WIRED Insider
• WIRED Consulting

David Nield

How to Turn Off Autoplay in Your Browser

At some point, you've probably had your web browsing rudely interrupted by an unexpected burst of music or other audio—usually accompanying some kind of video content on the page that you're viewing.

Sometimes these videos are adverts, sometimes they're content posted by users, but the clip and the accompanying sounds that go along with it are often not what you want to focus on. They can also start up at the most inconvenient times: You don't want an ad blaring through your laptop speakers when you're studying in a coffee shop, for example.

It doesn't have to be this way, because there are settings in all the popular browsers that can stop this behavior. It's also worth checking the settings for the sites you use to see if there are options you can tweak.

In the case of YouTube, for example, click your profile avatar (top right), then Settings . Under Playback and performance , turn off the Inline playback toggle switch so videos don't start running as you hover the cursor over them. On Netflix, click your profile avatar (top right), then Account . Click your account name, then Change next to Playback settings , and uncheck the Autoplay previews whilst browsing on all devices box.

Other sites have similar settings, but if you can't find what you're after, you can make some changes at the browser level as well.

AutoplayStopper will block media as it attempts to play.

While there was, once upon a time, a setting inside Chrome to stop video and audio from autoplaying as soon as a page was loaded, it's now been excised from the browser. To get the same end results you need to turn to a third-party browser extension, and one of the best is AutoplayStopper .

Lauren Goode

Aarian Marshall

Boone Ashworth

It's free, it's simple to use, and it does the job effectively. Videos still show up onscreen, but you're only shown a static thumbnail—they're not allowed to start playing without your approval. If you decide that you do want to see a video, just click on it.

The AutoplayStopper icon in the Chrome toolbar keeps track of how many videos have been blocked. If you right-click on it and choose Options , you can add particular websites that you want to be exempt from the AutoplayStopper restrictions.

There is one setting built into Chrome that you can take advantage of: If there's one particular website that's always interrupting your browsing with audio that starts up automatically, right-click on the browser tab at the top and pick Mute site —you won't hear a peep from any more pages on that particular site.

Setting autoplay options in Safari on macOS.

The options built into Safari cover the bases pretty well when it comes to controlling autoplay behavior—which is just as well, as Apple's browser isn't as well provided with third-party extensions as some of its competitors.

To stop media from automatically playing on a specific site in the browser, open the Safari menu and choose Settings for ... (the site name will be listed here). Next to Auto-Play you'll see that there are three options: Allow All Auto-Play , Stop Media with Sound (videos with audio are blocked), and Never Auto-Play (all videos are blocked).

To control autoplay in Safari more generally, open the Safari menu and pick Preferences . Open the Auto-Play tab, and you'll see you can set the options for the site you're currently on. Any sites that you've previously customized are listed here too.

At the bottom, there's another drop-down menu that lets you configure any websites that haven't yet been customized individually. To remove a website's individual setting, click on its entry in the list and then choose Remove .

Firefox enables you to block audio on its own, or both audio and video.

Firefox comes with a specific setting for media autoplay, so you don't necessarily have to rely on an extension. To find it, open the browser menu (the three horizontal lines, top right), then choose Settings , Privacy & security , and Settings next to Autoplay .

You've got three options, which are fairly self-explanatory: Allow Audio and Video , Block Audio , and Block Audio and Video . That middle option gives you an alternative between the two extremes of all or nothing—you can use it if you're happy for videos to play silently as soon as they're loaded on a particular page.

To make an exception, click the icon next to a website URL (it'll usually be a padlock), then click the connection link, More Information and Permissions : You can make changes under Autoplay . There's also the option to quickly mute a site by right-clicking on its tab and choosing Mute Tab from the menu that pops up.

With everything handled by the browser, there's less demand for autoplay add-ons, but you can still find ones that apply to specific sites: Autoplay No More , for example, will stop videos from automatically playing on YouTube, Vimeo, and several other sites.

You can block media from autoplaying in the Edge settings.

Microsoft Edge is based on the same Chromium code as Google Chrome these days, and so you can use the same browser extensions with it. Rather than just recommend the same add-on a second time though, we'll give you an alternative to try: Video Autoplay Blocker .

It does exactly what its name might suggest, stopping videos from playing without your express permission. That permission can be granted by simply clicking on the video you want to watch—and until that happens you'll just see a static thumbnail.

Unlike Chrome, Edge does still have a built-in setting for controlling autoplaying media. Open the "edge://flags" page, search for Show block option in autoplay settings , and change it to Enabled . You can then click the three dots (top right), Settings , Cookies and site permissions, and Media autoplay , and change the Control if audio and video play automatically on sites option to Block (or Limit to be less restrictive).

Finally, you can quickly silence a site in particular by right-clicking on the header of the tab that it's open in and choosing Mute tab . At the moment you can't mute sites in their entirety using the integrated options in Edge, as you can with Chrome.

• 📩 The latest on tech, science, and more: Get our newsletters !
• The aftermath of a self-driving tragedy
• How people actually make money from crypto
• The best binoculars to zoom in on real life
• Facebook has a child predation problem
• Mercury could be littered with diamonds
• 👁️ Explore AI like never before with our new database
• 💻 Upgrade your work game with our Gear team’s favorite laptops , keyboards , typing alternatives , and noise-canceling headphones

Scott Gilbertson

Medea Giordano

Brenda Stolyar

WIRED COUPONS

Save up to $58 Off TurboTax Online

20% Off All H&R Block 2024 Tax Software | H&R Block Coupon

Up to $20 off at Instacart in 2024

Up to 35% Off Your Order w/ DoorDash Promo Code

$10 off $100 purchase at Finish Line w/ coupon code

Groupon discount code: Extra 10% off any size order

• PC & Mobile

How to Stop Autoplay Videos in Safari

Lee Stanton Lee Stanton is a versatile writer with a concentration on the software landscape, covering both mobile and desktop applications as well as online technologies. Read more March 2, 2021

Device Links

• Device Missing?

When you’re browsing the web via Safari on your Mac or iOS device and a pop-up video or any other audio/visual content starts playing automatically, it can be quite annoying.

Not only can it be jarring and make reading a webpage more difficult, but the content can also play at the wrong moment – during a business meeting, for example. Fortunately for all Mac and iOS device users, you can disable this feature and forget about dealing with this issue.

In this article, we’ll guide you through the process of turning off the autoplay videos feature in Safari and answer several common questions related to the action.

How to Stop Autoplay Videos in Safari on Mac

If you’re a Mac user who has Safari as their primary browser, you’ll be pleased to know that Apple has made it possible to manage the autoplay video feature and set it to your preferences.

There’s a caveat, though. Only users of macOS Mojave 10.14 and more recent operating systems have access to the settings that we’ll be explaining below. Here’s what you need to do to stop autoplay videos in Safari on Mac:

Keep in mind that these steps will stop autoplay for the opened website only. To stop autoplay on all websites, here’s what you need to do:

Now you know how to disable autoplay for only one website or all of them. However, you can also stop autoplay for specific websites in Safari as well. To do that, open the websites in separate tabs in Safari and set the autoplay video preferences for each.

The list of the websites with disabled autoplay will appear under the “Configured Websites” section in the “Auto-Play” menu. However, if your preferences already prevent autoplay on all websites, you’ll need to disable it first.

Another Way to Stop Autoplay Video in Safari on Mac

There is a shortcut to stop the autoplay video feature on Safari on Mac that can come in handy from time to time. It’s especially useful when you know you’re entering a website that typically has audiovisual content that will start immediately. Here’s how it works:

You can also choose to “Stop Media with Sound,” which means Safari will stop automatically playing videos that have sound. However, videos without sound will continue to play.

This option is useful when visiting a website you’ve previously never visited before, and you haven’t disabled autoplay for all websites.

How to Stop Autoplay Videos in Safari on the iPhone

Approximately half of all internet searches start on a mobile device. And since Safari is the default iPhone browser, it makes sense that many users rely on it for their browsing activity while on the go.

This also means that if you’ve opened a webpage in Safari on iPhone and the audio portion of a video starts blasting right away (on public transportation, for example), that could be quite embarrassing.

Because you never know what you’ll come across when hopping from a new website to another new website on Safari, you can completely disable the feature.

Follow these steps to stop autoplay in Safari on iPhone:

That’s all there is to it. However, it’s important to point out that by disabling this feature, you won’t be able to see video previews for any native iPhone app either.

That means you won’t see previews of videos in your camera roll, for example. It also means that if you’re using a third-party app (such as Chrome) for browsing, this setting won’t apply.

Another way to disable autoplay on iPhone is to go to iTunes & App Store, then “Settings,” and turn off the “Video Autoplay” option. Unfortunately, this will in no way affect the autoplay feature in Safari.

How to Stop Autoplay Videos in Safari on iPad

For some users, browsing on Safari is much more convenient on an iPad. But those videos that start playing automatically can bother you, nonetheless.

To stop the autoplay in Safari on iPad, you’ll also need to go to “Accessibility” settings, the same as with iPhone. So, let’s guide you through the steps one more time:

• Open the “Settings” app on your iPad.
• Select “Accessibility” and then “Motions.”
• There, make sure to turn off the “Auto-Play Video Previews” option.

Additional FAQs

1. will this stop auto-playing videos on espn, facebook, and the daily mail.

If you disable the “Auto-Play Video Previews” on your iPhone or iPad, it will stop all videos from auto-playing on any website, as long as you’re using Safari.

On mobile devices, however, you can’t pick and choose which website you want to block from using the autoplay feature. But if you’re using a Mac laptop or desktop, you can prevent specific websites from forcing videos to start automatically playing.

So, if you want to stop ESPN, Facebook, and Daily Mail videos from automatically playing, you must open each of the websites in separate tabs and follow these steps to stop them from auto-playing:

• Go to “Safari>Preferences” and then switch to the “Websites” tab.

• Under “Currently Open Websites” for each website listed, select “Never Auto-Play.”

Alternatively, right-click on each of the website’s address bar and choose “Never Auto-Play” next to the “Auto-Play” option.

2. Does Auto-Play Slow Down Your Apple Device?

The speed at which a page loads depends on many things: your internet connection, whether the site is mobile-optimized, how old your device is, etc.

However, the embedded video that plays automatically on a webpage can also impact how fast the page loads. It might be an insignificant difference in some instances.

It’s relevant to point out that if you need to spend time muting the video or pausing it while you’re trying to read the page, the autoplay option slows down the browsing experience.

Watching Only the Videos You Want

The autoplay video feature is a somewhat divisive issue among users. It has its benefits as it can quickly lead you through content and introduce something that you might be interested in learning more about.

However, it can also seem quite intrusive at times, and plenty of people would rather not be startled by a video playing immediately as they open a website. News websites, in particular, use this tactic to keep page visitors engaged. Fortunately, iPhone, iPad, and Mac users have a way of preventing that while they browse with Safari.

Do you prefer the autoplay feature on or off? Let us know in the comments section below.

Related Posts

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Parth Shah February 29, 2024

Lee Stanton February 23, 2024

Lee Stanton February 19, 2024

Send To Someone

Missing device.

Please enable JavaScript to submit this form.

HTML5 video autoplay on mobile revisited

There have been some changes since the last time I tested autoplay videos . Animated GIFs have become popular, because they work on mobile. A problem is that animated GIFs can become very large . A video is typically a lot smaller. That is why Apple and Google decided to allow autoplay in their mobile browsers. But only if videos are muted . On iOS you also have to set the playsinline attribute, because by default videos will play fullscreen.

To get autoplay use the following setup:

My tests show that the latest mobile browsers now support autoplay with the exception of MS Edge.

[update] Opera Mini on iOS 10 supports autoplay, but plays the video fullscreen. Other versions do not autoplay as one would expect from a proxy browser.

[update] Firefox on iOS does not support autoplay. This is very different from Firefox on Android that supports autoplay even with sound.

[update] On Samsung devices, the default browser is Samsung Internet . It is uses the same basis as Chrome, but it's not updated as frequently.

You can test for yourselves on my autoplay test pages:

Of course, you do not have to use autoplaying videos everywhere.

• Sign Up Free
• Features Overview
• Video Sites
• Collaborate
• All Features
• Knowledge Base
• We Love Trees

General and Common Questions

[email protected]

Why are some autoplaying videos muted?

Why don’t my videos autoplay with sound.

You may have noticed that videos with autoplay enabled start off muted in most browsers. This is because most modern web browsers have implemented strict policies around autoplaying videos in an effort to improve the user experience and provide greater control of playback to viewers. In most cases, videos will only be allowed to autoplay with sound if the user has already previously played a video with sound on the same domain.

Consider adding a custom animated poster frame to your videos to improve the experience for your viewers. Animated poster frames are eye-catching and ensure that your viewers are much more likely to watch your videos with sound.

Do any browsers support autoplaying video with sound?

The short answer is no. Autoplaying videos in Safari, Chrome, Firefox, and Edge are all muted by default. Each browser and operating system will have its own policy, but most modern platforms generally follow similar guidelines. Unfortunately, SproutVideo does not have the ability to change this or override these policies.

Here are links to the recent policy updates for the most common platforms:

• Autoplaying video policy for iOS
• Autoplaying video policy for Android
• Autoplaying video policy for Safari
• Autoplaying video policy for Chrome
• Autoplaying video policy for Firefox
• Autoplaying video policy for Edge

Note: Chrome will rely on your viewer’s Media Engagement Index to decide if it will autoplay a video with sound or not. Chrome calculates a media engagement score which is highest on sites where media is played on a regular basis. When it is high enough, media playback is allowed to autoplay with sound on desktop only.

Example of an Autoplaying Video

The video below is set to autoplay, and you can try viewing it in different browsers to see how their different policies take effect.

Unless you’ve already played a video on this domain with sound, you should most likely see a muted volume icon in the bottom left corner of the following video:

If you prefer to hide the volume control icon , you can do so by including the volume=0 or background=true embed code parameters. Learn more about embed code parameters.

Here’s an example of the same autoplaying video with the muted volume control icon hidden:

Note: If your video has no audio track, the volume control icon is hidden by default, so no additional embed code parameters are needed to remove the muted icon.

Other articles in the General and Common Questions section:

• How to Download Your Videos
• How to Reactivate Your On-Hold SproutVideo Account
• What is SproutVideo?
• Why Choose SproutVideo Over Other Video Services?
• Core Features of the SproutVideo Platform
• How to Start Your Free Trial with SproutVideo
• How to Estimate Your Bandwidth and Storage Needs

View all (12 more)

Ready to see how sproutvideo can help your business grow.

Get started with a 30 day free trial.

Your information will only be used to pre-populate the trial sign up form and will not be stored.

SproutVideo is a video hosting platform for business. We offer all the video privacy, marketing, and analytics tools any business needs to succeed with live and on-demand video content online.

© 2010-2024 SproutVideo | Made with love in NYC

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Chrome for Developers

Muted Autoplay on Mobile - Say goodbye to canvas hacks and animated GIFs!

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 pragmatically with play() . Previously, playback on mobile had to be initiated by a user gesture, regardless of the muted state.

You can see this in action by visiting this sample . Playback of the muted video starts automatically in Chrome 53 or later.

In addition, muted playback can now be initiated using the play() method. Previously, play() would only initiate playback if it came from a user gesture such as a button click. Compare the following two demos on Android — try them on Chrome 53, then on an older version:

• Scripted playback
• Playback initiated by a button

We recommend using the autoplay attribute whenever possible, and the play() method only if necessary.

It's possible to unmute a video programmatically in response to a user gesture such as a click , but if you attempt to unmute a video programmatically without a user gesture, playback will pause.

The muted autoplay change will also make it possible to use play() with a video element not created in the DOM, for example to drive WebGL playback .

The play() method also returns a promise , which can be used to check whether muted programmatic playback is enabled. There is an example of this at simpl.info/video/scripted .

Why the change?

Autoplay was disabled in previous versions of Chrome on Android because it can be disruptive, data-hungry and many users don't like it .

Disabling autoplay had the unintended effect of driving developers to alternatives such as animated GIFs, as well as <canvas> and <img> hacks. These techniques are much worse than optimized video in terms of power consumption, performance, bandwidth requirements, data cost and memory usage. Video can provide higher quality than animated GIFs, with far better compression: around 10 times on average, and up to 100 times at best. Video decoding in JavaScript is possible , but it's a huge drain on battery power.

Compare the following — the first is a video and the second is an animated GIF:

They look pretty similar, but the video is less than 200KB in size and the animated GIF is over 900KB.

Chrome and other browser vendors are extremely cautious about user bandwidth. For many users in many contexts high data cost is often a greater barrier to access than poor connectivity. Given the prevalence of workarounds, muted autoplay isn't something that can be blocked, so offering good APIs and defaults is the best the platform can do.

The web is increasingly media centric . Designers and developers continue to find new and unforeseen ways to use video — and they want consistent behavior across platforms, for example when using background video as a design element. Muted autoplay enables functionality like this on both mobile and desktop.

The finer points

• From an accessibility viewpoint, autoplay can be particularly problematic . Chrome 53 and above on Android provide a setting to disable autoplay completely: from Media settings, select Autoplay.
• This change does not affect the audio element: autoplay is still disabled on Chrome on Android, because muted autoplay doesn't make much sense for audio.
• There is no autoplay if Data Saver mode is enabled. If Data Saver mode is enabled, autoplay is disabled in Media settings.
• Muted autoplay will work for any visible video element in any visible document, iframe or otherwise.
• Remember that to take advantage of the new behavior, you'll need to add muted as well as autoplay : compare simpl.info/video with simpl.info/video/muted .
• Muted autoplay is supported by Safari on iOS 10 and later.
• Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay.

Find out more

• Intent to Implement
• Feature dashboard
• Convert animated GIFs to videos with ffmpeg

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2016-07-27 UTC.

Enabling video autoplay on Safari Low Power mode

Introduction:.

In today’s digital landscape, delivering a flawless video playback experience is crucial for engaging website visitors. However, Apple’s Safari browser presents a unique challenge with its default behavior of disabling autoplay in Low Power Mode. Fear not, as we explore a smart and effective solution to optimize video playback on Apple devices, ensuring autoplay functionality even in Safari’s energy-saving mode.

The Challenge of Safari’s Low Power Mode:

When users activate Low Power Mode on their Apple devices, Safari’s default behavior restricts autoplay functionality for videos. While this feature enhances battery life, it can disrupt the intended user experience and hinder the impact of video content.

The Smart Solution: Leveraging <img> Tag for Video Playback:

To overcome Safari’s autoplay limitations, a clever workaround involves leveraging the <img> tag for video playback. By embedding the video source within the <img> tag, we can trigger autoplay functionality specifically for Apple devices running Safari, even in Low Power Mode.

Explanation of the Solution:

The JavaScript code snippet above checks if the user is using Safari and, if so, hides the <video> element while displaying the <img> element. This effectively enables autoplay for videos on Apple devices using Safari, even in Low Power Mode. For other browsers, the <img> element is hidden, and the <video> element is displayed normally.

Benefits and Impact:

Implementing this smart method allows website owners and developers to provide a consistent and engaging video playback experience across all devices, including Apple devices running Safari. By ensuring autoplay functionality in Low Power Mode, users can enjoy seamless video content without any interruptions, enhancing user engagement and satisfaction.

Conclusion:

Optimizing video playback on Apple devices, particularly in Safari’s Low Power Mode, is crucial for delivering an exceptional user experience. By leveraging the <img> tag and the JavaScript code snippet provided, web developers can enable autoplay functionality specifically for Safari, ensuring a seamless video playback experience for all users.

Greetings, tech enthusiasts and developers! Today, I want to share an exciting development that will be of particular interest to Apple device users and web developers. I’ve discovered a new method that enables autoplay functionality for videos on Apple devices, even when they are in low power mode. This is a significant breakthrough, as Safari, Apple’s default browser, traditionally disabled autoplay in low power mode.

The key to this method lies in leveraging a JavaScript script that dynamically controls the visibility of video elements on webpages, based on the user’s browser. Here’s the script:

This script detects whether the user is accessing the webpage through Safari. If Safari is detected, it hides the video element (identified by the „video” id) by manipulating its CSS display property to „none”. This ensures that videos won’t play on Apple devices in low power mode, aligning with energy-saving principles. For other browsers, the image element (with the „img” id) is hidden to maintain a consistent video display across different platforms.

Now, let’s explore the video elements used in this method. Here’s the code:

The <video> element is configured with several attributes to control its behavior. These attributes include „controls”, „preload”, „autoplay”, „playsinline”, „muted”, and „loop”. By using these attributes, we ensure that the video is displayed with controls, only metadata is preloaded, autoplay is enabled, the video plays inline, it is muted, and it loops continuously.

In the event that a browser doesn’t support video within the <img> tag, we include the <img> element as a fallback option. It shares similar attributes with the <video> element but serves as a placeholder image.

This new method unlocks the full potential of video playback on Apple devices, even when they are operating in low power mode. It empowers developers to deliver seamless video experiences to Apple users, while also prioritizing energy efficiency.

Stay ahead of the curve with the latest advancements in web technologies and enjoy uninterrupted video playback on your Apple devices!

Your Donations are Welcome and Appreciated

If you want to make a donation to support new projects or thank for your work so far, this is highly appreciated. To make a donation, click PayPal.me to take care of the rest safely. Thank you for your support!