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%3CLINGO-SUB%20id%3D%22lingo-sub-1848073%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-1848073%22%20slang%3D%22en-US%22%3EYeah%20Edge%20can%20definitely%20adopt%20some%20of%20the%20features%20from%20Opera%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1858697%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-1858697%22%20slang%3D%22en-US%22%3EOr%20Vivaldi.%20The%20design%20sense%20of%20both%20is%20similar%2C%20which%20is%20not%20surprising%20since%20Vivaldi%20was%20founded%20by%20the%20previous%20founder%20of%20Opera%2C%20after%20Opera%20was%20bought%20by%20a%20Chinese%20%22consortium.%22%3CBR%20%2F%3E%3CBR%20%2F%3EI%20use%20Vivaldi%20as%20my%20everyday%20driver%20because%20I%20like%20some%20of%20their%20%22toppings%22%20on%20Chromium%2C%20but%20I%20would%20switch%20to%20Edge%20fully%20if%20it%20did%20P-in-P%20better%20and%20offered%20the%20auto-shrinking%20sidebars%20that%20Opera%20does.%3C%2FLINGO-BODY%3E
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.

22 Replies
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

@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.

 

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


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.
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.
to quickly mute there is a speaker icon that appears on any tab that is producing sound

@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.

Yeah Edge can definitely adopt some of the features from Opera
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.

@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

 

Edge's PiP automatically resizes based on video orientation

@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.

@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)

@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.

Opera is the only browser with a fully developed picture-in-picture feature. It is even possible to control the volume using the mouse wheel. The yandex browser acquires Opera technology, so it also has a well-developed p-in-p. Recently, Firefox added the multi p-in-p feature, so it is possible to have multiple p-in-p windows simultaneously. I have already requested this feature from the Opera and Vivaldi teams, but so far, they have shown no interest in the implementation.

@Kened-Ferreira That's a very interesting suggestion! I've never needed to have multiple p-in-p views simultaneously, but it would be a nice addition.

 

Opera was my main browser for years, until the company sold itself to a Chinese "consortium." I can't trust them under those circumstances, so I abandoned it for Vivaldi, which was where a lot of former Opera people went. They're doing great, but they don't have the coding resources of Microsoft. 

 

I think Edge has the opportunity here to do something with a common feature no one else has matched. 

I would like Edge to implement these features in the pip. But big companies like Microsoft tend to be more conservative.

@Kened-Ferreira There's really no reason Microsoft should be "conservative." It can use its resources to build a feature that would be a real differentiator in the crowded market of Chromium-based browsers.

 

I have asked Vivaldi for this feature enhancement as well. It will be interesting to see who gets there first! :)

"There's really no reason Microsoft should be "conservative." It can use its resources to build a feature that would be a real differentiator in the crowded market of Chromium-based browsers."
I would really like that to happen.