如何在shaka播放器上使用自定义视频控制组件，如播放、暂停、静音等？答案

【问题标题】：How to use custom video control components like play, pause, mute etc on shaka player?如何在shaka播放器上使用自定义视频控制组件，如播放、暂停、静音等？
【发布时间】：2021-10-08 16:15:11
【问题描述】：

我在我的 react 项目中使用了最新版本（3.2.0）的 shaka player。

我目前正在尝试隐藏 shaka 播放器上的 UI 控件，并尝试使用自定义组件，如特技播放、播放、暂停、CC 选择器、音频语言选择器、音量栏、搜索栏和运行时间。

我在 windows 对象上提供了 shaka player 视频对象，并尝试将 UI 控件与我创建的自定义组件挂钩。

const video = document.getElementById('sampleShakaPlayer');
const shakaInstance = new shaka.Player(video);

要暂停播放，我正在尝试下面的功能

shakaInstance.pause();

但这似乎不起作用。我怎样才能做到这一点？

shaka 文档非常模糊，我找不到合适的函数来实现这一点。

提前致谢。

【问题讨论】：

标签： javascript reactjs html5-video media-player shaka

【解决方案1】：

你应该使用video.play()，它们与HTML5视频标签的方法相同。

也可以看看https://github.com/google/shaka-player/issues/1238

【讨论】：

【解决方案2】：

使用shaka播放器的配置方法。有了它，您可以操纵隐藏显示等控件。在 controlPanelElements 中，无论您传递什么控件，它都只会显示这一点。示例 - controlPanelElements: ["rewind", "fast_forward" 'play_pause', 'mute','time_and_duration', 'spacer', ''fullscreen', 'overflow_menu'],

const video = document.getElementbyid('video');
    const ui = video['ui'];
    const config = {
      addSeekBar: false,
       controlPanelElements: ['play_pause'],
        seekBarColors: {
        base: "rgba(255, 255, 255, 0.3)",
        buffered: "rgba(255, 255, 255, 0.54)",
        played: "rgb(255, 255, 255)",
        },
    };
    ui.configure(config);

【讨论】：

【解决方案3】：

如果您正在寻找自定义rewind/fast-forward 和volume controls，请查看https://www.npmjs.com/package/shaka-player-ui-controls

【讨论】：