Foliovision › Forums › FV Thoughtful Comments › Requests and Feedback › Audio player config
-
I am using the player for audio HLS m3u8 stream playback.
It works great, however, the UI configuration is the Wild West. Why not provide step by step instructions for audio setup?
For example, I have had to find custom CSS to accomplish some of the UI look I need, however, it is still not as good as it could be. Even with settings like:
[ ] Removes sharing buttons from top bar.
I still need to set .fvp-sharing { display: none !important; }
And in the embed code, I still have to set height:
[fvplayer src="https://<my s3 stream>" width="640" height="50" share="false"]
even though I set height here too:
[ ] Default Video Size: Width: Height: Enter values in pixels or 100%.I have these CSS overrides:
.fvp-sharing { display: none !important; } .embed-code-toggle { display: none !important; } .fvp-share-bar { display: none !important; } .flowplayer .fp-controls { opacity: 1 !important; visibility: visible !important; transition: none !important; }
Please consider making audio a first-class citizen in the video player world.
Thanks
-
-
Hello James,
I see you are using FV Player 7 and not the latest FV Player 8 version.
However you shouldn’t be running into such issues.
It seems that your HLS stream is not properly detected as being audio-only. It’s one of the things which we have improved in FV Player 8.
Once the stream type is detected to be audio properly, the sharing buttons or embed button does not appear as the player has no picture frame.
Thanks,
MartinThank you Martin.
I’m using the WordPress plugin. There does not seem to be an update:
FV Player
Formerly FV WordPress Flowplayer. Supports MP4, HLS, MPEG-DASH, WebM and OGV. Advanced features such as overlay ads or popups. Uses Flowplayer 7.2.12.
Version 7.5.49.7212 | View detailsFV Player Pro
Provides Vimeo and YouTube integration, custom video ads, encrypted HLS, AB loop and more for FV Player.
Version 7.5.50.7212 | By Foliovision | Visit plugin siteThank you
Hello James,
You can upgrade to FV Player 8 by installing via WordPress: https://wordpress.org/plugins/fv-player
It will deactivate FV Player 7 which you are using automatically and upgrade FV Player Pro to matching version 8.
Then when adding new HLS streams the type will either be detected properly, or if the check fails you get the checkboxes to choose if it’s Live or Audio stream.
Thanks,
MartinHi Martin,
I am testing v8, and the short code that uses a src attribute is not working: it’s showing UI with a white background, and auto hide on. This does not work:
[fvplayer src="https://je-audio-stream/stream.m3u8" share="false"]
What happened to these settings/features:
- Controlbar Always Visible
- Removes sharing buttons from top bar
- Removes the “Link” item to the top bar
This works as you describe – like an audio player:
[fvplayer id="2" width="640" height="50" share="false"]
Thank you
Hello James,
This does not work as FV Player does not know it’s an audio file:
[fvplayer src="https://je-audio-stream/stream.m3u8" share="false"]
The HLS stream (.m3u8) is usually a video.
Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-player-8.zip
Then you will be able to add
type="audio"
to the shortcode:[fvplayer src="https://je-audio-stream/stream.m3u8" share="false" type="audio"]
It’s a simple addition which we can include in the next FV Player 8 version.
The settings related to player interface are now in wp-admin -> FV Player -> Settings -> Skin -> Player Skin -> Controls. These are now simple checkboxes without any additional verb like “remove”:
- Always Visible
- Sharing
- Video Links
More in our documentation: https://foliovision.com/player/getting-started/customizing-controls
Thanks,
MartinThanks, yes, that type tag works with the download you sent to make it an audio player.
It was hard to find “Controls” in the Player Skin section on the Skin page. Maybe these could look like tabs with a different selected color?
The preview on the player skin section is white-on-white unless this is toggled, which is probably fine: Always Visible
The horizontal audio control looks like it would be hard to set on a mobile device due to size. Perhaps the device volume rocker would toggle that.
Any plans to be able to adjust the player controls’ size and make the player taller? They’re a bit small for an audio player.
Thank you – very nice work!
Hi Martin, here are a couple other items I noticed in my testing:
- The full screen button is not displayed when selected in Controls. On iOS, I believe that full screen keeps the player running and shows it in the Lock Screen, so it seems important.
- When the player is narrow, say on a mobile device, there is no audio control.
I am using the private copy you sent me on my production server.
Thank you
Hello James,
Thank you for the input, we will go through that in detail.
- Please let setup a publicly accessible test page where I can see the issue.
Of course it does not make sense showing that for audio files, but I see what you mean about the background playback. I wonder if there some other way of achieving that.
- We hide the volume control on purpose. On iOS you cannot control the volume from within the browser at all and it takes up the valuable space anyway.
Thanks,
MartinHello James,
- I was able to play one of your audio tracks and put the phone to sleep. The track continued playing. I could see the player on the lock screen too.
I could switch to some other app too.
For videos, the playback stops when you put the phone to sleep or switch apps, but then you can resume the playback using the player controls on the lock screen.
I used iPhone 11 Pro Max with iOS 18.1.1.
So it does not appear that the fullscreen button should be added for audio tracks for that purpose.
- I can see the bug with the Airplay buttons multiplying. It happens on our website too. We will get it fixed.
Thanks,
MartinHello James,
- Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-player-8.zip
Then the Airplay button will be added for each player instance on the page properly.
Thanks,
MartinHi Martin, I recently started work on this FV Player as an Audio player again, and I have all 3 Mobile settings all switched on. However, the iPhone using Safari does not allow the audio player to continue playing when the Lock Screen goes on.
According to ChatGPT:
iOS Safari & Chrome: Apple only allows background/lock-screen playback for media using the native <audio> element or <video> element in certain cases. When FV Player is rendering your HLS .m3u8 stream inside its custom player, iOS suspends it as soon as the screen locks.I also played an audio m3u8 stream from the video player, I get the same results, no play in the Lock Screen, so it seems that the native <audio> and <video> elements are not used, event with the Mobile settings? I could not find them.
Please let me know if there is something I can do to make this work.
Thank you
Hello James,
I see that when using a bare
<audio>
element, it does play in background automatically.I was also able to get it to play m3u8 on background that way, even if it had a video stream.
So I wonder if FV Player could be using the
<audio>
element for the audio tracks. It would add some complexity, but the background playback would work.Or perhaps we could switch the video from using the FV Player interface to use the native iOS player when we detect that the browser is being put into background. I’m not sure if JavaScript would provide such level of control.
Thanks,
Martin