如何让 html5 播放器在没有源的情况下播放

Question

我正在构建一个多媒体播放器，它需要控制一个页面上的多个其他多媒体播放器。为了做到这一点，我想在页面底部有一个区域，其中包含一个媒体播放控制器（包括一个搜索栏），它将控制页面上的所有其他播放器。例如，当用户点击播放按钮时，页面上的所有其他玩家都开始播放。

我想使用普通的视频/音频播放器，但我想要的不是播放真实内容，而是拥有控件，尤其是前进的搜索栏。不自己实现播放控件的原因是因为我想使用 video.js 插件的强大功能（例如时间轴上的事件标记）。

我设法显示了一个video.js播放器仅带有播放控件。此外，我设法设置了持续时间。问题是当我点击播放按钮或调用player.play() 时播放器不播放。

这是因为播放器没有媒体源。 video.js 和本机播放器不会在没有媒体源的情况下播放。

现在，有没有办法强制玩家在没有来源的情况下进行游戏？我可以让它认为它有一个吗？

谢谢，

Answer 1

我想出了一个可行的解决方案。

再次目的是让 video.js 中的工作媒体控制器不加载任何媒体内容，最重要的控制器是搜索栏。

我一直在玩 video.js 并试图在不加载任何媒体内容的情况下使搜索栏前进，并发现调用 player.currentTime() 确实会更新 curretTime 内部成员但是不更新用户界面。

最终我发现为了让 video.js 更新 UI，我们需要触发 timeupdate 事件。

所以我决定实现一个可以控制所有其他播放器的假播放器，并使用 video.js 播放器作为他的 UI（仅显示媒体控件并隐藏视频）。

假玩家需要使用上面提到的精确计时器here。

概念示例：

import videojs from 'video.js';

class MainMediaController {
    public static readonly INTERVAL = 250;

    protected _playerId: string;
    protected _duration: number;
    protected _mediaController: videojs.Player;
    protected _childPlayers: videojs.Player[];
    protected _currentTime: number;

    private _interval: number;
    private _intervalId: number;

    constructor(playerId: string, recordingDuration: number, childPlayers: videojs.Player[]) {
        this._playerId = playerId;          // id of the player at the bottom of the page which will be served as the main timeline
        this._duration = recordingDuration;
        this._interval = MainMediaController.INTERVAL;
        this._childPlayers = childPlayers;
        this._currentTime = 0;
}

    public async init() {
        this._mediaController = videojs(this._playerId);

        // await for ready state
        await new Promise((resolve, reject) => {
            this._mediaController.ready(() => {
                resolve();
            });
        });

        // set duration for a correct seek bar (longest.endTime - first.startTime)
        this._mediaController.duration(this._duration);
    }

    public play(){
        // update UI every 250ms
        this._intervalId = setInterval(this.intervalStep.bind(this), this._interval);

        for(let player of this._childPlayers){
            player.play();
        }
    }

    private intervalStep(){
        this._currentTime += 0.250;                          // 250ms
        this._mediaController.currentTime(this._currentTime);
        this._mediaController.trigger("timeupdate");         // trigger() is accessible don't worry
    }

    public pause(){...}
    public stop(){...}
    public seek(){...}
}

该解决方案让我可以在没有视频的主时间轴中使用 video.js 插件！！

Answer 2

图像的原理相同。如果您没有某些内容的图片，则需要有一个备用计划：占位符图片。

你可以对视频做同样的事情。

最简单的解决方案是在你的项目目录中：

> placeholders
  |-- fakeVideo_short.mp4
  |-- fakeVideo-long.mp4
  |-- fakeAudio.mp3
  |-- ...

当你的上层媒体控制器发现一个空播放器时，你可以给它一个占位符内容。

这是一个简单的解决方案，可让您更快地专注于重要需求：媒体控制器。

如何检测玩家是否需要占位符？

嗯：

1. 每当玩家完成/消费某些内容时，如果没有更多可用内容，您可以为其提供一个占位符。
2. 在应用程序开始时，如果播放器的数量多于内容，您可以将空白内容（占位符）提供给空的播放器。