support deal stream media for the componet of nplayer-react

[haianweifeng]

No description provided.

[oyuyue]

非常感谢您提交 pr。

不过这个 onStreamLoad 参数可能没有必要，现在可以满足这个需求，现在用户可以在组件挂载后直接用 ref 获取 player 实例。

是否有一些场景必须使用 onStreamLoad 参数，现在不能满足？如果没有的话我觉得应该保持 API 简单，不要设置太多重复功能的参数。

下面是 code sandbox 里面的 react 例子代码， player.current 是 player 实例。

import { useEffect, useRef } from "react";
import NPlayer from "@nplayer/react";
import "./styles.css";

export default function App() {
  const player = useRef();

  useEffect(() => {
    console.log(player.current);
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <NPlayer
        ref={player}
        options={{ src: "https://v-cdn.zjol.com.cn/280443.mp4" }}
      />
    </div>
  );
}

[leopku]

但是，到底如何用 react 组件加载 m3u8 流文件？

尝试了各种方法均失败，能给一个例子或示例代码吗？

[haianweifeng]

但是，到底如何用 react 组件加载 m3u8 流文件？

尝试了各种方法均失败，能给一个例子或示例代码吗？

import { useEffect, useRef } from "react";
import NPlayer from "@nplayer/react";
import Hls from 'hls.js';
import "./styles.css";

export default function App() {
  const player = useRef();

  useEffect(() => {
    console.log(player.current);
    const hls = new Hls();
    hls.attachMedia(player.current.video);
    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <NPlayer
        ref={player}
        options={{ src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" }}
      />
    </div>
  );
}

[leopku]

但是，到底如何用 react 组件加载 m3u8 流文件？
尝试了各种方法均失败，能给一个例子或示例代码吗？

import { useEffect, useRef } from "react";
import NPlayer from "@nplayer/react";
import Hls from 'hls.js';
import "./styles.css";

export default function App() {
  const player = useRef();

  useEffect(() => {
    console.log(player.current);
    const hls = new Hls();
    hls.attachMedia(player.current.video);
    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <NPlayer
        ref={player}
        options={{ src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" }}
      />
    </div>
  );
}

It works.
Big thanks.