[Feature Request]Playlist plugin works together with hls plugin?
leopku opened this issue · 27 comments
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?
Looks like you can handle it yourself
https://github.com/videojs/m3u8-parser
Appreciate for quick reply.
I'll dive to make it work with playlist plugin.
pr welcome 😍
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
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.
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
oplayer also needs to wait for elm's ref to be created, which may be delayed.
How to implement it elegantly? thanks.
Your ajax should be slower than oplayer Why is this a problem?
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.
奇怪的是，上午有段时间用 useCallback 是能获取 current 的。后来改来改去再也得不到 current 了。
tomorrow
I had the correct way to get ref by useCallback.
I had the correct way to get ref by useCallback.
how
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.
你更新了还是null 感觉有点奇怪
后来找一个方法可以比较好的解决这个问题了。
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() 方法后调用。
你这花里胡哨感觉也拿不到ref，可以用上上个版本不过严格模式下有问题。
first play 是？改变list后有方法可以调用播放第几个的好像
在 onMount 回调中拿到的直接就是 element，这是昨晚睡觉前已经调通的代码，目前运行良好。
改变list后有方法可以调用播放第几个的好像
就是因为 list 从初始化变成实装的 list 后要从 list 第一个开始播放。确认了一下，没有播放第几个的方法。已有的方法如下：
apply, changeSource, changeSourceList, constructor, destroy, hideUI, isWaiting?, next, previous, render, renderList, showUI
Playlist 已经支持 m3u8 了，非常感谢，结帖了。
changeSource(idx: number) 这就是播放第几个
changeSource(idx: number) 这就是播放第几个
大意了，好使！
用1.0.10版吧 别hack了 严格模式修不来
用1.0.10版吧
OK
别 hack了 严格模式修不来
没明白。 useCallback 也不算黑科技，官方也提议 useCallback 跟 useRef 一起用的哈。