如何加载Wistia内嵌视频依赖并无需额外点击立即播放

问题根因 #

你当前代码的核心问题是：动态插入Wistia SDK脚本后直接同步调用Wistia.embed方法，而外部脚本属于异步加载资源，脚本未完成下载和初始化时全局Wistia对象不存在，第一次点击的播放调用直接失效，第二次点击时脚本已经加载完成，才能正常触发播放。

修复方案 #

需要监听脚本的加载完成事件，等SDK完全就绪后再执行播放逻辑，同时增加加载状态标记避免重复插入脚本，顺便修复原有代码中XHR回调的作用域bug。

修复后完整JavaScript代码 #

// 增加全局标记，记录SDK是否已加载
let wistiaSdkLoaded = false;
var xhr = new XMLHttpRequest();
var baseUrl = "https://fast.wistia.com/oembed/?url=";
var accountUrl = encodeURIComponent("https://home.wistia.com/medias/");
var wistiaId = document.querySelector('.wistia_embed').getAttribute('data-wistia-id');
xhr.open('GET', baseUrl + accountUrl + wistiaId + "&format=json&callback=?");
xhr.send(null);
xhr.onreadystatechange = function () {
  var DONE = 4;
  var OK = 200;
  if (xhr.readyState === DONE) {
    // 修复原代码if无大括号导致的作用域bug
    if (xhr.status === OK) {
      var data = JSON.parse(xhr.responseText);
      var thumb = data.thumbnail_url.split('?')[0];
      var wistcont = document.querySelector("#wistia_" + wistiaId);
      var wistimg = document.createElement("img");
      wistimg.setAttribute("id", 'wistia_preview');
      wistimg.setAttribute("src", thumb + "?");
      wistimg.classList.add("responsive-img");
      wistcont.appendChild(wistimg);
      
      wistimg.addEventListener("click", function () {
        // 已经加载过SDK直接播放
        if (wistiaSdkLoaded) {
          Wistia.embed(wistiaId, {
            autoPlay: true,
            controlsVisibleOnLoad: false
          });
          return;
        }
        // 未加载则先加载SDK，加载完成后再播放
        var wistiaEmbedSupport = document.createElement('script');
        wistiaEmbedSupport.setAttribute('src', 'https://fast.wistia.com/assets/external/E-v1.js');
        wistiaEmbedSupport.onload = function() {
          wistiaSdkLoaded = true;
          Wistia.embed(wistiaId, {
            autoPlay: true,
            controlsVisibleOnLoad: false
          });
        }
        var WistiaContainers = document.querySelector('.wistia_embed');
        WistiaContainers ? document.head.appendChild(wistiaEmbedSupport) : console.log('Nothing to see... ');
      }, false);
    }
  }
}

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