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

Question

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

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

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

这是因为播放器没有媒体源。如果没有媒体源，video.js 和 native 播放器将无法播放。

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

谢谢，

Answer 1

我已经找到了一个可行的解决方案。

再次目的是让 video.js 能够工作媒体 Controller 而不加载任何媒体内容，最重要的 Controller 是搜索栏。

我一直在玩video.js，并试图在不加载任何媒体内容的情况下使搜索栏前进，结果发现调用player.currentTime()确实可以实际上更新了 curretTime 内部成员，但不更新 UI。

最终我发现，为了使 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 插件!!