开启autoPlay时如何让懒加载Wistia嵌入式视频取消静音？

问题原因 #

该问题由两个常见原因导致：

1. 现代浏览器要求iframe必须显式声明autoplay权限，否则即使用户交互触发的自动播放，也会默认被限制为静音状态
2. 仅靠URL参数传入muted=false容易被浏览器的自动播放策略兜底逻辑覆盖，主动调用播放器API设置音量可靠性更高

另外你原有代码中的图片加载回调存在闭包问题，多个Wistia容器共存时会出现图片加载错乱，下面的代码也同步做了修复。

修复后代码 #

仅需修改JS部分即可，原有CSS、HTML无需调整：

(function () {
  const wistia = document.querySelectorAll(".wistia");

  for (let i = 0; i < wistia.length; i++) {
    let source = `https://embed-ssl.wistia.com/deliveries/${wistia[i].dataset.thumb}.jpg`

    let image = new Image();
    image.src = source;
    // 修复闭包问题
    image.addEventListener("load", (function (idx) {
        return function() {
          wistia[idx].appendChild(image);
        }
      })(i)
    );

    wistia[i].addEventListener("click", function () {
      let iframe = document.createElement("iframe");

      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "");
      iframe.setAttribute("mozallowfullscreen", "");
      iframe.setAttribute("webkitallowfullscreen", "");
      iframe.setAttribute("oallowfullscreen", "");
      iframe.setAttribute("msallowfullscreen", "");
      // 新增autoplay权限声明
      iframe.setAttribute("allow", "autoplay; fullscreen");
      // 新增muted=false参数
      iframe.setAttribute('src', `//fast.wistia.net/embed/iframe/${this.dataset.embed}?videoFoam=true&autoPlay=true&muted=false`);

      // 加载完成后主动调用API设置音量、触发播放
      iframe.addEventListener('load', () => {
        // 音量取值0-1，可按需调整
        iframe.contentWindow.postMessage(JSON.stringify({
          method: 'setVolume',
          args: [1]
        }), '*');
        iframe.contentWindow.postMessage(JSON.stringify({
          method: 'play',
          args: []
        }), '*');
      });

      this.innerHTML = "";
      this.appendChild(iframe);
    });
  }
})();

内容的提问来源于stack exchange，提问作者Millhorn