页面加载时Wistia静态图片video_still_time属性被移除的解决求助

我尝试通过Wistia API设置预定义静态缩略图，但页面加载时，预定义的静态图时间属性?video_still_time=25被自动移除。

获取静态图片URL的代码 #

const videoEndpoint = `https://fast.wistia.com/embed/medias/${videoId}.json`

let videoStillUrl
            
$.ajax({
    async: false,
    url: videoEndpoint,
    success: function(data) {
       videoStillUrl = data.media.assets[6].url.replace("embed-ssl", "embed").replace(".bin", ".jpg") + '?video_still_time=25'
    }
});

console.log('VIDEO STILL URL: ' + videoStillUrl);

初始化代码 #

this.video.find('.media-video__embed-wrap').html(`
   <script src="//fast.wistia.com/embed/medias/${videoId}.jsonp" defer></script>
   <script src="//fast.wistia.com/assets/external/E-v1.js" defer></script>
   <div class="wistia_embed wistia_async_${videoId} playerColor=cf4917 autoPlay=false playButton=false"></div>
`);

$('.wistia_embed').addClass(`stillUrl=${videoStillUrl}`)

控制台日志显示生成的URL带有?video_still_time=25，但浏览器元素检查器中该参数被省略，请问该如何解决？

问题根源 #

你通过addClass添加stillUrl=${videoStillUrl}的方式存在错误：HTML类名不允许包含?、=等特殊字符，浏览器会自动截断或清理这些非法字符，导致参数丢失。

正确实现方式 #

方式1：初始化时直接写入class属性 #

不需要事后动态添加类，初始化播放器容器时直接把stillUrl参数写入class属性：

this.video.find('.media-video__embed-wrap').html(`
   <script src="//fast.wistia.com/embed/medias/${videoId}.jsonp" defer></script>
   <script src="//fast.wistia.com/assets/external/E-v1.js" defer></script>
   <div class="wistia_embed wistia_async_${videoId} playerColor=cf4917 autoPlay=false playButton=false stillUrl=${videoStillUrl}"></div>
`);

Wistia播放器初始化时会直接读取该参数，避免浏览器清理非法字符。

方式2：使用Wistia JavaScript API配置 #

推荐用官方API动态初始化播放器，彻底规避class属性的字符限制：

// 先注册播放器配置
window._wq = window._wq || [];
_wq.push({
  id: videoId,
  options: {
    playerColor: "cf4917",
    autoPlay: false,
    playButton: false,
    stillUrl: videoStillUrl // 直接传入带参数的完整URL
  }
});

// 插入播放器容器
this.video.find('.media-video__embed-wrap').html(`
   <div class="wistia_embed" id="wistia-${videoId}"></div>
`);

额外优化：替换同步AJAX为异步 #

当前代码使用async: false的同步AJAX会阻塞页面渲染，建议改为异步模式，确保拿到缩略图URL后再初始化播放器：

const videoEndpoint = `https://fast.wistia.com/embed/medias/${videoId}.json`

$.ajax({
    url: videoEndpoint,
    success: function(data) {
       const videoStillUrl = data.media.assets[6].url.replace("embed-ssl", "embed").replace(".bin", ".jpg") + '?video_still_time=25';
       // 拿到URL后再初始化播放器
       initWistiaPlayer(videoId, videoStillUrl);
    }
});

function initWistiaPlayer(videoId, stillUrl) {
  this.video.find('.media-video__embed-wrap').html(`
     <script src="//fast.wistia.com/embed/medias/${videoId}.jsonp" defer></script>
     <script src="//fast.wistia.com/assets/external/E-v1.js" defer></script>
     <div class="wistia_embed wistia_async_${videoId} playerColor=cf4917 autoPlay=false playButton=false stillUrl=${stillUrl}"></div>
  `);
}

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