设置 Plyr 视频播放器以响应 hls

Question

我正在构建一个直播网站，但我的视频播放器遇到问题。 我想要一个漂亮的视频播放器，具有直播控制功能，例如自动播放、暂停、实时播放、音量控制和自动质量。

我看到有些人用 Plyr 做这件事，所以这就是我正在尝试做的。 但是，我无法在视频播放器上显示视频，这就是我所拥有的。

import React from 'react';
import Plyr from 'plyr';
import Hls from 'hls.js';
import 'plyr/dist/plyr.css';

const url = 'https://live.api.video/liqjASz1KXHCgp2gh8InxtB.m3u8';

class PlyrComponent extends React.Component {
    componentDidMount() {
        const video = document.querySelector('#player');
        const player = new Plyr(video);
        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
            player.on('play', () => hls.startLoad());
        }
    }

    render() {
        return <video preload="none" id="player" autoPlay controls crossOrigin />;
    }
}

export default PlyrComponent;

我正在使用 React 构建我的网站，所以这是我附带的组件。现在，它不起作用，它只是加载没有视频。我真的需要一些帮助。

如果您有其他推荐的视频播放器，请告诉我。

谢谢！

Answer 1

你可以尝试Vidstack，我认为它还没有准备好生产，但它现在是一个非常好的反应选择。