Support multiple resolution on HLS and video orientation

[robinlieson92]

Hi, I just implemented your plugin on my Vue3 project but I have some problems in it.

1. My first problem, does the player with core HLS support the resolution? I have a playlist with a resolution, but the resolution doesn't appear in the settings. I've also tried using manual settings for it, but the video doesn't even have sound. Any ideas? Does changing the resolution manually have to destroy the player first?

2. My second problem, when my video playlist has portrait orientation videos, do I have to manually rotate the video in the player? Because when I rotate the video on the player, it doesn't affect the full screen appearance or the Picture on Picture feature. And even when on mobile desktop the video display becomes small and doesn't fit the container..

3. Third, when I finish with a video, or I close or return to the previous page, the Picture on Picture feature doesn't close, is there a function to close the feature?

I hope the questions above can be answered and explained, thank you, good luck always

[LarchLiu]

pls use vue3-video-player@0.3.10 & playcore-hls@0.1.5

1. My first problem, does the player with core HLS support the resolution? I have a playlist with a resolution, but the resolution doesn't appear in the settings. I've also tried using manual settings for it, but the video doesn't even have sound. Any ideas? Does changing the resolution manually have to destroy the player first?

Multiple resolutions are supported in new version. example

2. My second problem, when my video playlist has portrait orientation videos, do I have to manually rotate the video in the player? Because when I rotate the video on the player, it doesn't affect the full screen appearance or the Picture on Picture feature. And even when on mobile desktop the video display becomes small and doesn't fit the container..

I'm not sure what you means so sorry...

3. Third, when I finish with a video, or I close or return to the previous page, the Picture on Picture feature doesn't close, is there a function to close the feature?

I attempt to exit pip before unmount and you can try it.

enjoy & feedback

[deskasy]

Hi @LarchLiu

I want to elaborate on point number 3 that @robinlieson92 previously mentioned

After the video player has already finished playing the specific video, the picture in the picture is still floating and not automatically close, you can see from the picture in picture in the bottom right of the screen on the image I shared, can we set up for the picture in picture automatically closed when the video finished playing?

Thanks in advance

[robinlieson92]

First, thanks for the fast update and fixing the issue, but I still got some issue :

pls use vue3-video-player@0.3.10 & playcore-hls@0.1.5 Multiple resolutions are supported in new version. example

Thank for your attention to fix this, but when I try to check your example, the resolution show 180p when video is automatically change to Auto resolution (who make it to 1774p), can you show default Auto on resolution too please? Thank you.

Edited : When I try change resolution on 1-2 second after video load, it's show error like this too :

I'm not sure what you means so sorry...

Ah yeah, you must not sure what my problem, I just fork your example and embed it with my portrait video, can you make it rotate or something to make it not landscape on player or PoP ? https://stackblitz.com/edit/vertical-vue3-video-player?file=src/App.vue

I attempt to exit pip before unmount and you can try it.

Thanks for fixed too, but can I use option or function to close it when I want? Ex: when I try to complete the video and show another video, or I want to back with back button, but I must show finish modal first, then I want the PoP to closed? Like what @deskasy mention.

[LarchLiu]

@robinlieson92 @deskasy you can bind ended to do what you want. example

[LarchLiu]

Thank for your attention to fix this, but when I try to check your example, the resolution show 180p when video is automatically change to Auto resolution (who make it to 1774p), can you show default Auto on resolution too please? Thank you.

playcore-hls@0.1.7 has been released, try it again.

You can custom resolution by yourself, otherwise default resolution is '720p' and default level is the resolution's index. If there have no resolution of '720p' or custom default level is 0(currentLevel, loadLevel, startLevel, nextLevel). 'xxxxp' means video's height = xxxx

Ah yeah, you must not sure what my problem, I just fork your example and embed it with my portrait video, can you make it rotate or something to make it not landscape on player or PoP ? https://stackblitz.com/edit/vertical-vue3-video-player?file=src/App.vue

This is a strange question and I have no ideas right now. Why not solve this problem on the video origin resource?

Thanks for fixed too, but can I use option or function to close it when I want? Ex: when I try to complete the video and show another video, or I want to back with back button, but I must show finish modal first, then I want the PoP to closed? Like what @deskasy mention.

1. close pip at the end of video: just bind ended with function to exit pip like playEnded function in example above.
2. control by youself: use viewCore to control everything you want like pip function in example above.

[robinlieson92]

playcore-hls@0.1.7 has been released, try it again.

You can custom resolution by yourself, otherwise default resolution is '720p' and default level is the resolution's index. If there have no resolution of '720p' or custom default level is 0(currentLevel, loadLevel, startLevel, nextLevel). 'xxxxp' means > video's height = xxxx

After I try change it to playcore-hls@0.1.7, whenever I change the resolution, player got crashed and show my uploaded error picture on the other comment, is there I must update player too? or something that my video is broken?

This is a strange question and I have no ideas right now. Why not solve this problem on the video origin resource?

Unfortunately I can't, because video origin resource also play on my project mobile apps and working well, I can't change it whatever I want.

1. close pip at the end of video: just bind ended with function to exit pip like playEnded function in example above.
2. control by youself: use viewCore to control everything you want like pip function in example above.

I close this PoP issue, thanks for your reply for this.

[LarchLiu]

After I try change it to playcore-hls@0.1.7, whenever I change the resolution, player got crashed and show my uploaded error picture on the other comment, is there I must update player too? or something that my video is broken?

It works for me with vue3-video-player@0.3.10 & playcore-hls@0.1.7 Can you reproduce this on stackblitz?

recommend

As you know this repo is base on [vue-core-video-player](https://github.com/core-player/vue-core-video-player), i can only do my best to change it. I recommend a more mature player for **_production environments_**. such as [ArtPlayer](https://github.com/zhw2590582/ArtPlayer) [DPlayer](https://github.com/DIYgod/DPlayer) good luck

[robinlieson92]

I still got error after I change back to playcore-hls@0.1.5, what the problem? It's because I use sentry? Or something that hls core bug? I can't reproduce it on stackblitz.. I already remove node_modules or package-lock.json, still same..

Update: Sentry not the issue, because where I put my playlist on stackblitz, it still same,,

Update on 21 March 2022, 18:30 Local Time : After fork your playcore-hls plugin and change everything, I found my error. It's because my video must continue from start or load first segment after change the resolution. When I change my video to the first segment, video continue with selected resolution. Can you fix it or do something then when try to change the resolution, segment from HLS loaded again from begining? Because if someone have video like me (must continue or load from first segment), it's very so annoying to change it from begining again. Or add function when I try change the resolution, I can change the time or load the segment?