Comments (7)
@bchah Hi! I'll check it out soon!
from ovenplayer.
Hi @SangwonOh this is still reproducible in all versions of Safari. Have you had a chance to look at it?
from ovenplayer.
@bchah Hi. Finally I checked this issue! 😂
First of all, the player you see on the page is not an ovenplayer. A player that uses the basic
When playing 4:3 ratio streams under the same conditions, the problem was not reproduced.
However, what is unusual about this situation is that it is playing media that comes from an input device. web camera etc.
When the video player is resized, the browser can try to request and handle whatever resolution the input device can provide. This process will take some time and may cause this problem.
Now in my situation I can't simulate a 4:3 webcam. So please check two points.
-
Please check https://webrtc.github.io/samples/src/content/devices/input-output/ for the same issue. If so, this becomes a browser issue and is difficult to control.
-
Play the output stream using OvenPlayer demo and check if the problem occurs. If the problem does not occur, we can be sure that it is a problem that occurs when playing input devices.
from ovenplayer.
Hi @SangwonOh thank you for having a look. What is your test environment where you are not seeing the issue with WebRTC playback? Sorry I may have confused things by demonstrating with an input device, but this is highly reproducible with WebRTC playback. I recorded this just now on the OvenPlayer demo page and we can see that the issue occurs whenever the player changes size:
ResizeJan18.mp4
from ovenplayer.
@bchah Thanks for retesting!! 👍
This issue only occurs on Safari 17 on macOS Sonoma. I think there is a bug related to object fit in Safari 17. Other communities are struggling with the same problem.
I tried a few glitches, but it doesn't work. I think it would be better to wait for Apple to update.
from ovenplayer.
@SangwonOh I did some further testing and it is definitely an issue with Safari 17, but it is not exclusive to macOS Sonoma. I was able to reproduce it on any version of Safari 17 including iOS and iPadOS. Safari 16 and 15 both are fine (I brought out some old Macs to test).
I read about the object-fit problem in Safari 17 and some people have found solutions, either by using static values, or using JS instead of CSS to set certain parameters. However I noticed that the "object-fit" CSS property does not appear in the OvenPlayer code 🤔 Can you help me discover where in your code this is handled? I played with resize-sensor.js but that may not be it.
from ovenplayer.
Yes. This problem occurs in Safari 17.
HTML video elements use object-fit: contain by default. And the video element of OvenPlayer uses the default value.
I will try the methods you mentioned.
either by using static values, or using JS instead of CSS to set certain parameters.
If you have any more references, I would appreciate it if you could provide them.
from ovenplayer.
Related Issues (20)
- Error Initializing HLS but only in Chrome--and the demo site works HOT 3
- PIP mode (Picture in Picture) HOT 2
- Full screen not working in iOS 17 Safari with WebRTC HOT 9
- Can't unmute - Android Chromium HOT 1
- Vue 3 doesnt work Error initializing HLS. HOT 1
- OvenPlayer as an ES6 module ERROR HLS HOT 1
- Auto-refresh seems to generate a memory leak HOT 1
- Unable to ear sound on windows browser HOT 3
- Vue 3 oven player instans update volume and full screen replays video and start again llhls HOT 4
- Keep player as close as possible to live mode HOT 1
- feature request: customizable error icon HOT 2
- websocket connection issue HOT 1
- Unable to select Multiple audio tracks in webrtc HOT 1
- Some of the media could not be downloaded due to a network error HOT 3
- How can I implement the hls.recoverMediaError() method? HOT 1
- Unreliable WebRTC playback in Safari iOS HOT 4
- Adaptive Stream and "Auto" decision HOT 3
- How to detect when the stream becomes available? HOT 2
- Dynamically change HLS parameters HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ovenplayer.