search

shiyiya / oplayer

:zap: Another HTM5 video player.
https://oplayer.vercel.app
MIT License
147 stars 19 forks source link

Change player width & height when/after container size changed #55

Closed leopku closed 1 year ago

leopku commented 1 year ago

🚀 Feature Proposal

Change player width & height when/after container size changed

Motivation

When container size changed smaller, player size keep no change.

Example

Please provide an example for how this feature would be used.

Pitch

Why does this feature belong in the oplayer ecosystem?

shiyiya commented 1 year ago

Just one line of css is all it takes.

#oplayer {
  aspect-ratio: 16/9; // Any ratio you want
}
leopku commented 1 year ago

Sorry, I didn't describe my problem clearly.

I'm using react component @oplayer/react.

After the react player component rendered, the player won't change it's size while container changed. There wasn't problem about aspect ratio.

Any advice?

shiyiya commented 1 year ago

The player will fill the container. You just need to set the width and height of the container, and the size of the player will change with the container.

Maybe I don't know what you want. You can use pictures to describe the current situation and expectations.

ps: 如果你会中文，可以用中文描述。

leopku commented 1 year ago

1、播放器有办法自适应 container 大小没？

截图是在一个弹出的新窗口中，留意截图下面的空白部分。

https://imgur.com/a/e1q53dG

2、手动调整弹出窗口的大小，播放器大小不会自动调整。有没有类似 changeSize(width, heigh) 这样方法，在窗口的大小变更回调中可以调用。

PS：oplayer 这样的插件式设计个人非常喜欢，目前在试验从 nplayer 切到 oplayer

shiyiya commented 1 year ago

传递 aspect-ratio 为 0 试试

leopku commented 1 year ago

不行，设了 aspectRatio={0} 后白屏了，控制台没有报错。

    <ReactPlayer
      plugins={plugins}
      aspectRatio={0}
      ref={player}
      autoplay={true}
      source={source}
    />
shiyiya commented 1 year ago

😂 你把 react 复制出来，去掉aspectRatio那部分，只留ref那层就好了, 或者等晚点我改一下，再或者 css 覆盖下, container》div height100 width100

leopku commented 1 year ago

试了一下，还是不行。等你改吧。谢了先。

shiyiya commented 1 year ago

v 1.2.5 released.

 <ReactPlayer
      plugins={plugins}
      aspectRatio={0}
      ref={player}
      autoplay={true}
      source={source}
    />
leopku commented 1 year ago

Perfect. It fixed. Thanks a lot.

leopku commented 1 year ago

@shiyiya 全新项目，aspectRatio 不起作用了？

shiyiya commented 1 year ago

aspectRatio 0?

https://codesandbox.io/s/jotai-todolist-6w6sml?file=/src/App.tsx

没问题啊

leopku commented 1 year ago

奇怪了，我这新窗口弹出后，没有随 container 改变大小

shiyiya commented 1 year ago

奇怪了，我这新窗口弹出后，没有随 container 改变大小

被其他样式影响了吧

leopku commented 1 year ago

奇怪了，我这新窗口弹出后，没有随 container 改变大小

被其他样式影响了吧

应该不是。两处代码一样。

我再查查