/*! Ads Here */

Safari audio autoplay -Thủ Thuật Mới

byTin Tức •tháng 11 29, 2021

0

Mẹo về Safari audio autoplay Chi Tiết

Quý khách đang tìm kiếm từ khóa Safari audio autoplay được Update vào lúc : 2022-11-29 16:49:07 . Với phương châm chia sẻ Mẹo về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi tìm hiểu thêm tài liệu vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Admin lý giải và hướng dẫn lại nha.

Autoplay guide for truyền thông 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 truyền thông 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 truyền thông and Web Audio APIs, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.

Nội dung chính

Autoplay guide for truyền thông and Web Audio APIs

Autoplay and autoplay blocking

Autoplay availability

Autoplay of truyền thông elements

The autoplay attribute

The play() method

Autoplay using the Web Audio API

The autoplay feature policy

Example: Allowing autoplay only from the document’s domain

Example: Allowing autoplay and fullscreen mode

Example: Allowing autoplay from specific sources

Example: Disabling autoplay

Best practices

Handling autoplay failure with truyền thông controls

Browser configuration options

Autoplay blocking is not applied to <video> elements when the source truyền thông 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 truyền thông are not affected by autoplay blocking.

Autoplay and autoplay blocking

The term autoplay refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin. This includes both the use of HTML attributes to autoplay truyền thông as well as the user 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:

and

audioElement.play();

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 truyền thông will be allowed to autoplay only if 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 truyền thông frequently, or manually through preferences or other user interface features

If the autoplay feature policy is used to grant autoplay tư vấn 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 auto-play policies for Google Chrome and WebKit.

Note: Put another way, playback of any truyền thông 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 truyền thông elements

Now that we’ve covered what autoplay is and what can prevent autoplay from being allowed, we’ll look how your web site or app can automatically play truyền thông 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. This sets the autoplay property on the element to true, and when autoplay is true, the truyền thông 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 truyền thông has been received to begin playback and continue to play through to the end of the truyền thông 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:

<audio id=”musicplayer” autoplay>

<source src=”/music/chapter1.mp3″>

</audio>

Example 2: Detecting autoplay failure

If you rely on autoplay for anything important, or if autoplay failure will impact your app in any way, you will probably want to be able to tell when it autoplay didn’t begin. Unfortunately, in the case of the autoplay attribute, recognizing whether or not autoplay successfully began is tricky. There’s not an sự kiện triggered when autoplay fails. Nor is there an exception thrown or a callback you can set up or even a flag on the truyền thông element that tells you if autoplay worked. All you can really do is examine a few values and make an educated guess as to whether or not autoplay worked.

A better approach, if you’re able to adjust the direction you look things from, is to instead rely on knowing that playback of the truyền thông has successfully started, instead of when it fails to start. You can do this easily, by listening for the play sự kiện to be fired on the truyền thông element.

The play sự kiện is sent both when the truyền thông is resumed after being paused and when autoplay occurs. That means that the first time the play sự kiện is fired, you know your truyền thông is being started for the first time after the page is opened.

Consider this HTML for a truyền thông element:

Here we have a <video> element whose autoplay attribute is set, with an onplay sự kiện handler set up; the sự kiện is handled by a function called handleFirstPlay(), which receives as input the play sự kiện.

handleFirstPlay() looks like this:

let hasPlayed = false;

function handleFirstPlay(sự kiện)

if(hasPlayed === false)

hasPlayed = true;

let vid = sự kiện.target;

vid.onplay = null;

// Start whatever you need to do after first playback has started

After getting a reference to the video element from the Event object’s target, the element’s onplay handler is set to null. 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.

Note: This approach doesn’t differentiate between autoplay and the user starting playback manually.

The play() method

The term “autoplay” also refers to scenarios in which a script tries to trigger the playback of truyền thông that includes audio, outside the context of handling a user input sự kiện. This is done by calling the truyền thông element’s play() method.

Note: It is strongly recommended that you use the autoplay attribute whenever possible, because tư vấn for autoplay preferences are more widespread for the autoplay attribute than for other means of playing truyền thông 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 truyền thông.

document.querySelector(“video”).play();

Example: Handling play() failures

It’s much easier to detect a failure to autoplay truyền thông when you use the play() method to start it. play() returns a Promise which is resolved once the truyền thông 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 truyền thông.

You might use code like this to accomplish the job:

let startPlayPromise = videoElem.play();

if (startPlayPromise !== undefined)

startPlayPromise.then(() =>

// Start whatever you need to do only after playback

// has begun.

).catch(error =>

if (error.name === “NotAllowedError”)

showPlayButton(videoElem);

else

// Handle a load or playback error

);

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

let playAttempt = setInterval(() =>

videoElem.play()

.then(() =>

clearInterval(playAttempt);

)

.catch(error =>

console.log(‘Unable to play the video, User has not interacted yet.’);

);

, 3000);

Autoplay using the Web Audio API

In the Web Audio API, a web site 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 sự kiện is subject to autoplay rules.

More content will come soon; autoplay blocking is still being worked on Mozilla. If others have it already, they are welcome to pitch in with this section…

The autoplay feature 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 Feature-Policy header’s autoplay directive is used to control which domains, if any, can be used to autoplay truyền thông. By default, the autoplay feature policy is set to ‘self’ (including the single quote characters), indicating that autoplay is permitted as they’re hosted on the same domain as the document.

You can also specify ‘none’ to disable autoplay entirely, ‘*’ to allow autoplay from all domains, or one or more specific origins from which truyền thông can be automatically played. These origins are separated by space characters.

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

When using the allow attribute on an <iframe> to specify a feature policy for that frame and its nested frames, you can also specify the value ‘src’ to allow autoplay of truyền thông 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 Feature-Policy header to only allow truyền thông to autoplay from the document’s origin:

Feature-Policy: autoplay ‘self’

To do the same for an <iframe>:

Example: Allowing autoplay and fullscreen mode

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

Feature-Policy: autoplay ‘self’; fullscreen

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

Example: Allowing autoplay from specific sources

The Feature-Policy header to allow truyền thông to be played from both the document’s (or <iframe>’s) own domain and https://example.truyền thông looks like this:

Feature-Policy: autoplay ‘self’ https://example.truyền thông

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 feature policy to ‘none’ disables autoplay entirely for the document or <iframe> and all nested frames. The HTTP header is:

Feature-Policy: autoplay ‘none’

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 truyền thông 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.

Firefox

truyền thông.allowed-to-play.enabled

A Boolean preference which specifies whether or not 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.

truyền thông.autoplay.allow-extension-background-pages

This Boolean preference, if true, allows browser extensions’ background scripts to autoplay audio truyền thông. Setting this value to false disables this capability. The default value is true.

truyền thông.autoplay.allow-muted

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

truyền thông.autoplay.block-webaudio

A Boolean preference which indicates whether or not to apply autoplay blocking to the Web Audio API. The default is false, except on Nightly where it is true.

truyền thông.autoplay.default

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

truyền thông.autoplay.enabled.user-gestures-needed (Nightly builds only)

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

truyền thông.block-autoplay-until-in-foreground

A Boolean preference which indicates whether or not truyền thông 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.