[Feature Request]Playlist plugin works together with hls plugin?

[leopku]

OPlayer works well with m3u8 by hls plugin. But when I put hls plugin together with playlist plugin - which had sources with many m3u8 files, it throw MEDIA_ERR_SRC_NOT_SPPORTED.

Does any plan to add support for making playlist plugin work with hls plugin?

[shiyiya]

Looks like you can handle it yourself https://github.com/videojs/m3u8-parser

[leopku]

Appreciate for quick reply. I'll dive to make it work with playlist plugin.

[shiyiya]

pr welcome 😍

[shiyiya]

Hello, any progress? I'm going to implement it. Do you have a reference? https://raw.githubusercontent.com/fanmingming/live/main/tv/m3u/global.m3u

[shiyiya]

@leopku Can you provide your playlist for testing, thank you very much!

[shiyiya]

[leopku]

It worked great with static m3u8 list. Big thanks!

I'm now troubling with changing sources dynamically because the current of ref always null in useEffect. But it seems nothing about oplayer.

[shiyiya]

https://github.com/upvorg/upvorg.github.io/blob/80592b5003292296a9d1708d3ac5f9602f4b2f3a/packages/index/src/pages/player/index.tsx#L86

You can refer to this

[leopku]

https://github.com/upvorg/upvorg.github.io/blob/80592b5003292296a9d1708d3ac5f9602f4b2f3a/packages/index/src/pages/player/index.tsx#L86

You can refer to this

I reviewed the link above. It seems same codes with me. I create a sandbox to reproduce this problem. In the sandbox I put two elements all had a ref. The div element can get correct ref but the ReactPlayer element not. The link of sandbox was here: https://codesandbox.io/s/great-greider-77zygk?file=/src/App.tsx

[shiyiya]

oplayer also needs to wait for elm's ref to be created, which may be delayed.

[leopku]

How to implement it elegantly? thanks.

[shiyiya]

Your ajax should be slower than oplayer Why is this a problem?

[leopku]

I added a delayed print for player info, but it still got null.

    const timer = setTimeout(() => {
      console.log("player ref: ", playerRef, "div ref: ", divRef);
    }, 30000);
    return () => clearTimeout(timer);

I had updated the example sandbox.

[leopku]

奇怪的是，上午有段时间用 useCallback 是能获取 current 的。后来改来改去再也得不到 current 了。

[shiyiya]

tomorrow

[leopku]

I had the correct way to get ref by useCallback.

[shiyiya]

I had the correct way to get ref by useCallback.

how

[leopku]

Using useCallback to save ref. But there still had the null ref problem after first rendering. After first rendering, ref can be got correctly.

I had updated the sandbox.

[shiyiya]

你更新了还是null 感觉有点奇怪

[leopku]

后来找一个方法可以比较好的解决这个问题了。

function useHookWithRefCallback(onMount, onUnmount) {
  const ref = useRef<OPlayer | null>(null);
  const setRef = useCallback((node: OPlayer) => {
    if (ref.current) {
      onUnmount(ref.current);
    }

    ref.current = node;

    if (ref.current) {
      onMount(ref.current);
    }
  }, [onMount, onUnmount]);

  return setRef;
}

const { data } = useFetch({ url: 'xxx/api' });

const player = useHookWithRefCallback((el) => {
  // prepare sourceList here 
  el.context.playlist.changeSourceList(sourceList)
},
() => {})

实际使用中发现，由于动态变更了 sourceList， playlist 提供的方法还不够，建议加上 first() 方法和 play() 方法，在调用 changeSourceList() 方法后调用。

[shiyiya]

你这花里胡哨感觉也拿不到ref，可以用上上个版本不过严格模式下有问题。 first play 是？改变list后有方法可以调用播放第几个的好像

[leopku]

在 onMount 回调中拿到的直接就是 element，这是昨晚睡觉前已经调通的代码，目前运行良好。

改变list后有方法可以调用播放第几个的好像

就是因为 list 从初始化变成实装的 list 后要从 list 第一个开始播放。确认了一下，没有播放第几个的方法。已有的方法如下： apply, changeSource, changeSourceList, constructor, destroy, hideUI, isWaiting?, next, previous, render, renderList, showUI

[leopku]

Playlist 已经支持 m3u8 了，非常感谢，结帖了。

[shiyiya]

changeSource(idx: number) 这就是播放第几个

[leopku]

changeSource(idx: number) 这就是播放第几个

大意了，好使！

[shiyiya]

用1.0.10版吧 别hack了 严格模式修不来

[leopku]

用1.0.10版吧

OK

别 hack了 严格模式修不来

没明白。 useCallback 也不算黑科技，官方也提议 useCallback 跟 useRef 一起用的哈。