如何加载嵌入式视频依赖项并立即播放视频？答案

【问题标题】：How to load an embedded video dependency and play the video immediately onload?如何加载嵌入式视频依赖项并立即播放视频？
【发布时间】：2021-11-02 03:17:28
【问题描述】：

我正在处理来自一家名为 Wistia (wistia.com) 的公司的嵌入式视频。我的目标是延迟加载视频，但是有一个依赖项需要与随附的脚本一起加载。单击时，脚本将附加到页面的头部。但是，需要额外点击才能播放视频。

如何将依赖项加载到头部并立即开始播放视频无需额外点击？

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 (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 () {
      (function() {
        wistiaEmbedSupport = document.createElement('script');
        wistiaEmbedSupport.setAttribute('src', 'https://fast.wistia.com/assets/external/E-v1.js');
      
        WistiaContainers = document.querySelector('.wistia_embed');
        WistiaContainers ? document.head.appendChild(wistiaEmbedSupport) : console.log('Nothing to see... ');
      })();
      wistiaEmbed = Wistia.embed(wistiaId, {
        autoPlay: true,
        controlsVisibleOnLoad: false
      });
    }, false);
    //console.log(JSON.parse(xhr.responseText));
  } else {
    //console.log(xhr.status);
  }
}

.embed-responsive::before {
  padding-top: 56.25%;
  display: block;
  content: "";
}
*, ::after, ::before {
  box-sizing: border-box;
}
.responsive-img{
  max-width: 100%;
  height: auto;
}
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="cs__page-video">
  <div class="embed-responsive">
    <div id="wistia_u1p1pze1an" data-wistia-id="u1p1pze1an" class="embed-responsive-item wistia_embed"></div>
  </div>
</div>

【问题讨论】：

标签： javascript wistia

【解决方案1】：

更新

我添加了一个setTimeout 函数，似乎实现了我的目标。

  setTimeout(function () {
    wistiaEmbed = Wistia.embed(wistiaId, {
      autoPlay: true,
      controlsVisibleOnLoad: false
    });
  }, 500)

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 (xhr.status === OK)
      var data = JSON.parse(xhr.responseText);
    var thumb = data.thumbnail_url.split('?')[0];
    var wistiaContent = document.querySelector("#wistia_" + wistiaId);
    var wistiaImg = document.createElement("img");
    wistiaImg.setAttribute("id", 'wistia_preview');
    wistiaImg.setAttribute("src", thumb + "?");
    wistiaImg.classList.add("responsive-img");
    wistiaContent.appendChild(wistiaImg);
    wistiaImg.addEventListener("click", function () {
      (function () {
        wistiaEmbedSupport = document.createElement('script');
        wistiaEmbedSupport.setAttribute('src', 'https://fast.wistia.com/assets/external/E-v1.js');

        WistiaContainers = document.querySelector('.wistia_embed');
        WistiaContainers ? document.head.appendChild(wistiaEmbedSupport) : console.log('Nothing to see... ');
      })();
      setTimeout(function () {
        wistiaEmbed = Wistia.embed(wistiaId, {
          autoPlay: true,
          controlsVisibleOnLoad: false
        });
      }, 500)
    }, false);
    //console.log(JSON.parse(xhr.responseText));
  } else {
    //console.log(xhr.status);
  }
}

.embed-responsive::before {
  padding-top: 56.25%;
  display: block;
  content: "";
}
*, ::after, ::before {
  box-sizing: border-box;
}
.responsive-img{
  max-width: 100%;
  height: auto;
}
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="cs__page-video">
  <div class="embed-responsive">
    <div id="wistia_u1p1pze1an" data-wistia-id="u1p1pze1an" class="embed-responsive-item wistia_embed"></div>
  </div>
</div>

【讨论】：