Picture-in-picture volume control and clickable icon

%3CLINGO-SUB%20id%3D%22lingo-sub-1839694%22%20slang%3D%22en-US%22%3EPicture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1839694%22%20slang%3D%22en-US%22%3E%3CP%3EChromium%20browsers%20used%20to%20have%20a%20volume%20control%20on%20the%20PiP%20window%2C%20and%20a%20progress%20bar.%20These%20have%20disappeared%20from%20many%20of%20them%2C%20except%20Vivaldi%20and%20Opera.%20Adding%20them%20to%20Edge%20would%20be%20a%20competitive%20advantage.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnother%20improvement%20would%20be%20to%20add%20a%20small%20icon%20somewhere%20in%20the%20video%20player%20(when%20it's%20still%20on%20the%20page)%20that%20would%20allow%20a%20user%20to%20left-click%20to%20pop%20the%20video%20out.%20Vivaldi%20has%20this%20now.%20The%20icon%20can%20appear%20only%20when%20the%20mouse%20hovers%20over%20the%20video%20player.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1840088%22%20slang%3D%22en-US%22%3ERe%3A%20Picture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1840088%22%20slang%3D%22en-US%22%3Eon%20HTML5%20videos%2C%20when%20you%20right-click%2C%20the%20picture%20in%20picture%20option%20is%20there.%3CBR%20%2F%3Efor%20YouTube%2C%20and%20other%20sites%2C%20turning%20this%20flag%20on%20will%20add%20a%20small%20icon%20in%20the%20global%20media%20controls%20which%20is%20for%20PiP%3CBR%20%2F%3Eedge%3A%2F%2Fflags%2F%23global-media-controls-picture-in-picture%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1840201%22%20slang%3D%22en-US%22%3ERe%3A%20Picture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1840201%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX%3C%2FA%3E%26nbsp%3BThanks.%20I%20know%20what%20the%20context%20menu%20shows.%20In%20my%20case%2C%20right-clicking%20in%20a%20Youtube%20video%20behaves%20strangely.%20On%20first%20right-click%2C%20I%20get%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22first.png%22%20style%3D%22width%3A%20359px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F230561iF0F3ED01BA13F5D2%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22first.png%22%20alt%3D%22first.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20I%20right-click%20a%20second%20time%2C%20I%20get%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22second.png%22%20style%3D%22width%3A%20360px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F230562iF23911DF43079EF6%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22second.png%22%20alt%3D%22second.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3Ewhere%20I%20can%20pop%20the%20video.%20Other%20browsers%20include%20a%20better%20solution%3A%20a%20simple%2C%20small%20icon%20that%20appears%20on%20hover%20that%20requires%20no%20repetitive%20or%20menu%20clicking.%20I%20also%20wonder%20why%20the%20right-click%20context%20menu%20behaves%20differently%20as%20well.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1840896%22%20slang%3D%22en-US%22%3ERe%3A%20Picture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1840896%22%20slang%3D%22en-US%22%3EThat's%20because%20YouTube%20present%20their%20own%20customized%20right-click%20menu.%3CBR%20%2F%3E%3CBR%20%2F%3Ealso%20try%20the%20feature%20I%20told%20you%20about%2C%20active%20using%20this%20flag%3A%3CBR%20%2F%3Eedge%3A%2F%2Fflags%2F%23global-media-controls-picture-in-picture%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1841071%22%20slang%3D%22en-US%22%3ERe%3A%20Picture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1841071%22%20slang%3D%22en-US%22%3EI%20did%2C%20and%20thanks%20for%20the%20suggestion.%20Trouble%20is%2C%20that's%20locked%20to%20the%20browser%20window%20instead%20of%20the%20vid%20picture.%20And%20it%20doesn't%20offer%20volume%20control.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20think%20P-in-P%20is%20most%20useful%20when%20all%20relevant%20controls%20are%20available%20on%20it%20directly.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1841928%22%20slang%3D%22en-US%22%3ERe%3A%20Picture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1841928%22%20slang%3D%22en-US%22%3EYes%2C%20volume%20control%20is%20a%20must%20feature%20to%20use%20PiP%20window%20seamlessly.%20Currently%20there%20is%20no%20option%20to%20quickly%20mute%20or%20change%20volume.%20Team%2C%20please%20look%20into%20this%20suggestion%20and%20take%20Edge%20ahead%20than%20others.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1843555%22%20slang%3D%22en-US%22%3ERe%3A%20Picture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1843555%22%20slang%3D%22en-US%22%3Eto%20quickly%20mute%20there%20is%20a%20speaker%20icon%20that%20appears%20on%20any%20tab%20that%20is%20producing%20sound%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1844679%22%20slang%3D%22en-US%22%3ERe%3A%20Picture-in-picture%20volume%20control%20and%20clickable%20icon%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1844679%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F310193%22%20target%3D%22_blank%22%3E%40HotCakeX%3C%2FA%3E%26nbsp%3BHere's%20the%20implementation%20of%20P-in-P%20on%20the%20Opera%20browser%2C%20for%20comparison.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22JoeDuffus_0-1604329319603.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F230832i6AA2A5CF15965F9F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22JoeDuffus_0-1604329319603.png%22%20alt%3D%22JoeDuffus_0-1604329319603.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESimilar%20icon%20to%20Edge%20for%20muting%20the%20volume%20but%20with%20the%20volume%20slider%20immediately%20to%20the%20right%2C%20along%20with%20time%20counter.%20Perfect.%20Opera%20also%20moves%20the%20%22return%20video%20to%20window%22%20control%20to%20top-left%20on%20mouseover%2C%20rather%20than%20sticking%20it%20where%20the%20movement%20and%20volume%20controls%20should%20be.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOpera's%20is%20the%20best%20design%20for%20this%20feature%20I've%20seen%2C%20but%20I%20think%20the%20Edge%20developers%20can%20meet%20or%20exceed%20what%20they%20have%20done%2C%20and%20make%20the%20picture-in-picture%20feature%20truly%20useful.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Chromium browsers used to have a volume control on the PiP window, and a progress bar. These have disappeared from many of them, except Vivaldi and Opera. Adding them to Edge would be a competitive advantage. 

 

Another improvement would be to add a small icon somewhere in the video player (when it's still on the page) that would allow a user to left-click to pop the video out. Vivaldi has this now. The icon can appear only when the mouse hovers over the video player.

14 Replies
Highlighted
on HTML5 videos, when you right-click, the picture in picture option is there.
for YouTube, and other sites, turning this flag on will add a small icon in the global media controls which is for PiP
edge://flags/#global-media-controls-picture-in-picture
Highlighted

@HotCakeX Thanks. I know what the context menu shows. In my case, right-clicking in a Youtube video behaves strangely. On first right-click, I get this:

 

first.png

 

If I right-click a second time, I get this:

 

second.png

where I can pop the video. Other browsers include a better solution: a simple, small icon that appears on hover that requires no repetitive or menu clicking. I also wonder why the right-click context menu behaves differently as well.

 

Highlighted
That's because YouTube present their own customized right-click menu.

also try the feature I told you about, active using this flag:
edge://flags/#global-media-controls-picture-in-picture


Highlighted
I did, and thanks for the suggestion. Trouble is, that's locked to the browser window instead of the vid picture. And it doesn't offer volume control.

I think P-in-P is most useful when all relevant controls are available on it directly.
Highlighted
Yes, volume control is a must feature to use PiP window seamlessly. Currently there is no option to quickly mute or change volume. Team, please look into this suggestion and take Edge ahead than others.
Highlighted
to quickly mute there is a speaker icon that appears on any tab that is producing sound
Highlighted

@HotCakeX Here's the implementation of P-in-P on the Opera browser, for comparison. 

 

JoeDuffus_0-1604329319603.png

 

Similar icon to Edge for muting the volume but with the volume slider immediately to the right, along with time counter. Perfect. Opera also moves the "return video to window" control to top-left on mouseover, rather than sticking it where the movement and volume controls should be. 

 

Opera's is the best design for this feature I've seen, but I think the Edge developers can meet or exceed what they have done, and make the picture-in-picture feature truly useful.

Highlighted
Yeah Edge can definitely adopt some of the features from Opera
Highlighted
Or Vivaldi. The design sense of both is similar, which is not surprising since Vivaldi was founded by the previous founder of Opera, after Opera was bought by a Chinese "consortium."

I use Vivaldi as my everyday driver because I like some of their "toppings" on Chromium, but I would switch to Edge fully if it did P-in-P better and offered the auto-shrinking sidebars that Opera does.
Highlighted

@JoeDuffus 

edgesuggestions_0-1604610934282.png

 

pro are the size and controls

edgesuggestions_1-1604611044429.png

but still not supported everywhere

edgesuggestions_2-1604611110111.png

plus other things i wrote today.

 

other problem with vivaldi: play button doesn't work always. we need to switch to the website and click play.

 

here with opera 

edgesuggestions_0-1604611613656.png

 

better size option

 

edgesuggestions_0-1604611763586.png

 

and better controller and website support

 

Highlighted
Edge's PiP automatically resizes based on video orientation
Highlighted

@edgesuggestions You are right about the p-in-p not working all the time in Vivaldi, but it does so reliably for me (I don't use TikTok). 

 

Adding volume control and progress bar to the P-in-P window just makes sense. Adding a hover icon for popping out the video would also be a great addition.

 

Thanks.

Highlighted

@JoeDuffus yes i agree: scrollable position, audio, overlay button and full mode switch are the most important. even chrome extension is not able to do that ... ***/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg and it's ridicoulus we need to click a button on the toolbar (especially now with the chrome://flags/#extensions-toolbar-menu problem)

Highlighted

@edgesuggestions 

that flag doesn't exist on Edge (yet) and it has nothing to do with the Global media controls icon in the toolbar. that icon is not an extension icon so it won't be included in that menu. it is part of the Edge itself.