如何删除应用于 Video.js 视频元素的默认样式，并使其像普通 HTML <video> 元素一样遵循样式表？

问题描述

我正在用 HTML、CSS 和 JS（使用 VueJS）编写一个网络视频播放器。网络播放器支持4x4 视图同时播放4 个视频（参见照片）。我使用普通的 HTML <video> 标签实现了这种布局，但我需要播放器能够流式传输 HLS/DASH，因此需要使用 Video.js 库。使用 video.js <video> 元素的实例时，使用普通 HTML 元素的样式不再有效。

我阅读了有关更改 video.js 播放器样式的 Video.js 文档，并按照他们给出的说明禁用了默认样式。但是根据浏览器工具的检查，以及仍然不符合要求的布局，它似乎不起作用。

我将发布适用于普通 HTML <video> 元素的代码片段，以及使用 Video.js <video> 元素的非工作代码。请尝试指出我缺少的内容以获得所需的布局。

工作示例的 HTML 代码

播放器组件包含 4 个 <VideoComp> 组件，如下所示：

   <div v-else class="">
      <VideoComp
        class="q1 fourByFourVideo"
        v-bind:url="require('../assets/videos/video1.mp4')"
      ></VideoComp>
      <VideoComp
        class="q2 fourByFourVideo"
        v-bind:url="require('../assets/videos/video2.mp4')"
      ></VideoComp>
      <VideoComp
        class="q3 fourByFourVideo"
        v-bind:url="require('../assets/videos/video4.mp4')"
      ></VideoComp>
      <VideoComp
        class="q4 fourByFourVideo"
        v-bind:url="require('../assets/videos/video5.mp4')"
      ></VideoComp>
    </div>

将这个 CSS 应用到它

.fourByFourVideo {
  height: 50%;
  width: 45%;
}
.q1 {
  margin-right: 3px;
}
.q2 {
  margin-left: 3px;
}
.q3 {
  margin-right: 3px;
}
.q4 {
  margin-left: 3px;
}

<VideoComp> 是由以下 HTML 代码组成的 VueJS 组件：

<video :id="this.id" autoplay loop :src="this.url" type="video/mp4"></video>

这是生成的网页和正确的期望结果的照片。

What a working layout should look like

当改用 Video.js 而不是普通的 <video> 元素时，变化不大，几乎没有变化，这让我相信问题出在 Video.js 库中的某种默认样式上.

非工作 VideoJS 示例的 HTML 代码

播放器组件

<div class="">
      <JSVideoComp
        id="1"
        class="q1 fourByFourVideo"
        vidSrc=""
      ></JSVideoComp>
      <JSVideoComp
        id="2"
        class="q2 fourByFourVideo"
        vidSrc=""
      ></JSVideoComp>
      <JSVideoComp
        id="3"
        class="q3 fourByFourVideo"
        vidSrc=""
      ></JSVideoComp>
      <JSVideoComp
        id="4"
        class="q4 fourByFourVideo"
        vidSrc=""
      ></JSVideoComp>
    </div>

使用与之前相同的 CSS：

.fourByFourVideo {
  height: 50%;
  width: 45%;
}
.q1 {
  margin-right: 3px;
}
.q2 {
  margin-left: 3px;
}
.q3 {
  margin-right: 3px;
}
.q4 {
  margin-left: 3px;
}

<JSVideoComp> 与 <VideoComp> 非常相似：

<video :id="this.id" ref="videoPlayer" class="video-js"></video>

Video.js 播放器的每个实例都有以下选项：

videoOptions: {
        fluid: false,fill: false,loadingSpinner: false,bigPlayButton: false,errordisplay: false,textTrackSettings: false,controls: false,controlBar: false,autoplay: true,sources: [
          {
            src: this.vidSrc,type: "application/x-mpegURL"
          }
        ]
      }

以下是生成的网页布局的图像。正如您所看到的视频是垂直堆叠的，我已经尝试了很多方法来使它们与没有 Video.js 的布局相匹配，但仍然无法获得。

Layout with Video.js element that isn't working

我还在应用程序的根 HTML 文档的头部添加了以下 2 行

    window.VIDEOJS_NO_BASE_THEME = true;
    window.VIDEOJS_NO_DYNAMIC_STYLE = true;

如果您想删除默认样式，建议将它们包含在内。

如何让 Video.js 版本的布局与普通 HTML <video> 元素版本的布局相匹配？

解决方法

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

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

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

html javascript video.js vue.js