视频 JS 播放器的关键 CSS 中断

问题描述

有人对 Video JS 播放器有特别的疑问吗？ (https://videojs.com/)

出于某种原因，我无法使用 Video JS 正确生成我的关键 CSS。每次我进行构建时，它都会处理并提供我的内联 CSS，但视频播放器中的实际样式却一团糟 - 有很多隐藏元素从未显示。

我在使用 Plyr (https://plyr.io/) 时没有遇到此问题，而且我的任何网站上都没有遇到此问题 - 只是 Video JS 元素。

有什么想法吗？

如果需要，我可以把一个完整的例子放在一起，这是我在 Gulp 文件中的关键 CSS 任务：

// Process the critical path CSS one at a time
function processCriticalCSS(element,i,callback) {
  const criticalSrc = pkg.urls.critical + element.url;
  const criticalDest = pkg.paths.templates + element.template + "_critical.min.css";

  let criticalWidth = 1200;
  let criticalHeight = 1200;
  if (element.template.indexOf("amp_") !== -1) {
    criticalWidth = 600;
    criticalHeight = 19200;
  }
  $.fancyLog("-> Generating critical CSS: " + $.chalk.cyan(criticalSrc) + " -> " + $.chalk.magenta(criticalDest));
  $.critical.generate({
    src: criticalSrc,// 'target' instead of 'dest' for critical V3+
    target: criticalDest,penthouse: {
      blockJSRequests: false,forceInclude: pkg.globs.criticalWhitelist
    },inline: false,ignore: [],css: [
      pkg.paths.dist.css + pkg.vars.siteCssName,],minify: true,extract: true,width: criticalWidth,height: criticalHeight
  },(err,output) => {
    if (err) {
      $.fancyLog($.chalk.magenta(err));
    }
    callback();
  });
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）