Could sound be enabled by default in Web Stories?

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience.

Question:

didn’t find a way to enable by default the sound in an AMP Story. Is it possible ?

Answer:

No, it is not possible to enable audio by default. Browsers often explicitly blacklist this behavior and only allow audio to be enabled after a user gesture, e.g:

The global muted state of an amp-story starts off muted; users must always unmute the story for audio to play out.

Autoplay Policy Changes

Note: The Autoplay Policy launched in M66 Stable for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy will launch in M71. This affects web games, some WebRTC applications, and other web pages using audio features. Developers will need to update their code to take advantage of the policy.

Chrome’s autoplay policies will change in April of 2018 and I’m here to tell you why and how this is going to affect video playback with sound. Spoiler alert: users are going to love it!

Figure 1. Internet memes tagged “autoplay” found on Imgflip.

New behaviors

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.

Chrome’s autoplay policies are simple:

Media Engagement Index (MEI)

The MEI measures an individual’s propensity to consume media on a site. Chrome’s current approach is a ratio of visits to significant media playback events per origin:

  • Consumption of the media (audio/video) must be greater than 7 seconds.
  • Audio must be present and unmuted.
  • Tab with video is active.
  • Size of the video (in px) must be greater than 200×140.

From that, 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 on desktop only.

User’s MEI is available at the chrome://media-engagement internal page.

Best Practices for Web Developers

Websites should assume any use of <video> or <audio> requires a user gesture click to play. It’s important to detect if auto-play was denied, since users now have the ability to turn off all forms of auto-play, including silent videos. The code snippet below shows just how easy this is to check. It’s worth pointing out that the new auto-play policies apply both to video used as a tool for making something visual happen (like background video or video-as-animated-gif) and also to video that serves as consumable content. We recommend web developers test their site with these new behaviors, ensuring any custom media controls behave correctly when auto-play is disabled, either automatically by Safari or by users.

  • Websites using WebKit’s built-in media controls automatically work great with the new policies.
  • Don’t assume a media element will play, and don’t show the pause button from the start. Look at the Promise returned by the play function on HTMLMediaElement to see if it was rejected:
var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}
  • Auto-play restrictions are granted on a per-element basis. Change the source of the media element instead of creating multiple media elements if you want to play multiple videos back to back (or play a pre-roll ad with sound, followed by the main video).
  • Don’t play ads without showing media controls because they may not auto-play and users will have no way of starting playback.
  • Remember that audio tracks that render silence are still audio tracks, and their existence affects whether a video will auto-play at all. In these cases, a video with silent audio tracks won’t play. The audio track should be removed or, alternatively, the muted attribute can be set on the media element.

Ref: https://stackoverflow.com/questions/48775292/is-it-possible-to-enable-by-default-the-sound-in-amp-story

預設圖片
Green Yang

Brand, Jazz, WordPress. Come on in! Here are my own 3 websites and IG for career and for fun!
品牌, 事業, 網站, 爵士,歡迎來逛逛我的三個網站與一個 IG ,有正經有趣味喲! - https://linktr.ee/gjazz

文章: 30

歡迎留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

聯絡洽詢

聯絡洽詢

開始來 刻刻網頁 x 刻刻事業!

不要走開,請點選單的「聯絡我們」

Contact Us

聯絡洽詢
Hello, 需要專業服務洽詢嗎?
讓我們提供適合您網站/網路事業的最佳解決方案、專業實作或顧問服務 👋
Fluent Forms 事業加持?
%d 位部落客按了讚: