Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fluid mode is not working for HLS videos on mobile Chrome, Safari #6939

Closed
ilyakorman opened this issue Nov 10, 2020 · 2 comments · Fixed by #7023
Closed

Fluid mode is not working for HLS videos on mobile Chrome, Safari #6939

ilyakorman opened this issue Nov 10, 2020 · 2 comments · Fixed by #7023

Comments

@ilyakorman
Copy link

ilyakorman commented Nov 10, 2020 •
edited
Loading

Description

The player fails to keep itself sized to a particular aspect ratio, using the fluid mode, when using HLS video source on mobile Chrome, Safari

Steps to reproduce

  1. Use the code, with 21:9 aspect ratio HLS video as a source
<html>

<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>Video.js Starter Template</title>
</head>

<body>
  <video
         id="my_video"
         class="video-js vjs-fluid"
         controls
         preload="auto"
         data-setup="{}"
         >
 <source src="https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8" type="application/x-mpegURL" />
   
  </video>
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
</body>

</html>

Results

Expected

the player should be resized to the video aspect ratio, works on mobile Firefox:
image

Actual

The player is not resized, keeping its original size and leaving black spaces above and below the video on mobile Chrome, Safari:
image

image

Additional Information

versions

videojs

Latest

browsers

Chrome, latest. Safari

OSes

Android, iOS

plugins

none
@welcome
Copy link

welcome bot commented Nov 10, 2020

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

@ilyakorman ilyakorman changed the title Fluid mode not working for HLS videos on mobile Chrome, Safari Fluid mode is not working for HLS videos on mobile Chrome, Safari Nov 10, 2020
@mister-ben
Copy link
Contributor

mister-ben commented Nov 13, 2020 •
edited
Loading

It's because the video element reports 0 for the video width and height at loadedmetadata so we use the default 16:9 aspect ratio. I thought we updated the player on resize events too but apparently not. A workaround would be to set fluid to true on resize events, player.on('resize', function() {this.fluid(true)})

@mister-ben mister-ben mentioned this issue Dec 30, 2020
Merged
7 tasks
gkatsev pushed a commit that referenced this issue Jan 6, 2021
@mister-ben
fix(player): Ensure fluid works when dimensions not initially known (#…
661962c 
…7023)

The video dimensions aren't necessarily known at loadedmetadata particularly with native playback on iOS. In fluid mode, the player defaults to 16:9 and does not update once the dimensions are known.

- Updates player styles on resize events.
- Fixes arguments passed to addEventedCallback so the callbacks are executed.

Fixes #6939
@dependabot dependabot bot mentioned this issue Mar 15, 2021
Closed
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 25, 2022
edirub pushed a commit to edirub/video.js that referenced this issue Jun 8, 2023
@mister-ben @edirub
fix(player): Ensure fluid works when dimensions not initially known (v…
ea1728e 
…ideojs#7023)

The video dimensions aren't necessarily known at loadedmetadata particularly with native playback on iOS. In fluid mode, the player defaults to 16:9 and does not update once the dimensions are known.

- Updates player styles on resize events.
- Fixes arguments passed to addEventedCallback so the callbacks are executed.

Fixes videojs#6939
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@mister-ben @ilyakorman