时间戳

首页 > 解决方案 > videojs插件在控制栏上多次显示

javascript - videojs插件在控制栏上多次显示

问题描述

我必须在我的 Angular 网站上显示一个视频，并且我使用了 videojs 播放器进行显示。视频有多个比特率选择器，所以我使用了 videojs-hls-quality-selector 插件，对于搜索栏，我使用了 videojs-seek-buttons。在桌面上一切正常，但是当我在移动设备上打开播放器时，它会在控制栏中显示 2 次搜索栏和 2 次质量选择器。

下面是我使用的代码

打字稿代码：

import videojs from 'video.js';
import 'videojs-seek-buttons';
import 'videojs-contrib-quality-levels';
import videojsqualityselector from 'videojs-hls-quality-selector';


videoJSPlayer: videojs.Player;

this.videoJSPlayer = videojs('content_video', {
      aspectRatio: '16:9',
      fluid: true,
      controlBar: {
        'pictureInPictureToggle': false
      },
      html5: {
        hls: {
          overrideNative: true,
        }
      },
      sources: [{
        src: this.vSource,
        type: 'application/x-mpegURL'
      }],
      poster: this.vThumb
});

this.videoJSPlayer.seekButtons({
      forward: 30,
      back: 10
});

this.videoJSPlayer.hlsQualitySelector = videojsqualityselector;
this.videoJSPlayer.hlsQualitySelector({
      displayCurrentQuality: true,
});

HTML 代码：

<video id="content_video" class="video-js vjs-default-skin" controls preload="none"
        data-setup='{ "aspectRatio":"640:267", "playbackRates": [0.5, 1, 1.5, 2]}'>
</video>

我附上了截图供参考：

在此处输入图像描述

标签： javascriptangulartypescriptvideo.js

解决方案

我不是 100% 确定这是问题所在，但我想这是因为默认情况下，video.js 会自动video使用参数初始化任何元素data-setup。

默认情况下，当您的网页完成加载时，Video.js 将扫描具有 data-setup 属性的媒体元素。data-setup 属性用于将选项传递给 Video.js。https://docs.videojs.com/tutorial-setup.html

我猜测搜索按钮插件会挂钩到视频播放器初始化时发生的一些事件，并添加按钮。因为您随后在代码中对其进行了初始化，所以它们被添加了两次。很可能您只需要删除该data-setup属性，并将您想要保留的任何配置移动到 javascript 中。

推荐阅读