can HTML5 video play/pause control be removed from the HTML picture in picture - html5-video

I'm implementing picture-in-picture on my website but I have various custom video controls (for play/pause, seek etc). When I enter pictureinpicture (using requestPictureInPicture()), the video pops out properly, but it has the play/pause control, which I don't want (I want to just use my custom controls).
Is there any way to hide the play/pause control (or all controls) from the floating PIP window?
The only customization I can find is in CSS for the empty video that remains in the main page - so I can hide that altogether via
:picture-in-picture { display: none; }
but I don't see any way to customize the look of the floating PIP window, including removing some/all controls.
Thanks,
David

Related

How to control audio/video original controls without creating custom controls

I would like to control (play, pause, download, toggle full-screen, progress bar) the original controls of html5 <video></video> without making the customize button. I don't want to make custom controls. Or, is it the best answer to create custom controls by own?
The reason is I want to toggle when another video is playing or paused. The video player is paused when it is in the invisible area.
I would like to control in javaScript when click original play/pause button like image

How to run camera on page in preview mode?

I create an application for working with the camera, I just can not figure out how to call the camera, so that it was in preview mode.
In the documentation I read, there only a photo can be done, but you can not bring the camera to the page!
cordova-plugin-camera
There is an example of an application where the camera is displayed on the page in preview mode:
Here on the background of the page the camera is shown and it is possible to work with camera
Is there anyone among you who worked with the camera, if so, tell me how or give advice. Thank you!
Ps: sorry for bad english.
I think you are looking for this plugin. It is built to display a camera preview in HTML. Please be aware that the authors of the plugin stated themselfes that the plugin is still under constant development so there might be some things that do not work as expected.
The plugin offers following features:
Start a camera preview from HTML code.
Maintain HTML interactivity.
Drag the preview box.
Set camera color effect.
Send the preview box to back of the HTML content.
Set a custom position for the camera preview box.
Set a custom size for the preview box.
Set a custom alpha for the preview box.
Set the focus mode, zoom, color effects, exposure mode, white balance mode and exposure compensation
Tap to focus

.Net Form Layout - create Chat UI like facebook or google hangouts

I want to create an application and chatting is involved. I am currently struggling to format existing controls or to create a control with the following conditions:
a container is docked to the main form's bottom
inside of that container, a button can be used to toggle a chat
component (e.g. text edit) to become either visible or invisible
if visible, the chat component is aligned with the button that was
pressed but does not force a resize on the container of the button
So basically I want to achieve a facebook or google hangouts like chat layout in vb.net that can also scale dynamically according to the current window size. Nevertheless it should always stick to the bottom.
Please keep in mind that this question is not about making the chat work but only the layout/design problem I am facing.
My current approach is the following:
FlowLayoutPanel docked to bottom with buttons
RichEdit as placeholders to simulate the chat component
My current layout
Is there an easier way to do what I want to do?
Set the anchors to the bottom of the page/panel.
On the designer, click the control you want to edit, find the Anchor property and change it to bottom (and left/right/top, whatever you'd like).

Windows Phone 8.1 Create a Swipeable Scrollable Control

I am trying to create an animation to a control.
So think of the animation and control of a now playing page on most touch screen devices. You see the control (album photo) and swipe either way and get it to slide off the screen and then the next control (album photo) slides on in its place.
I am not asking for you to code me this, but I am having trouble wrapping my head around a way that this could be done.
The control content is always changing, when you swipe one way, an image is removed from the view and then the next is added.
What you need is FlipView control which can get you the interface you described.
Here are some references:
Quickstart: Adding FlipView controls (XAML)
XAML FlipView control sample

Text isn't always altered properly in plugin after resize

I wrote an Awesomium 1.7.2 plugin that displays a bunch of text and contains a few buttons. While the plugin functions fine, I have some strange display issues.
I have a separate program that I sometimes "Dock" at the top of my computer screen. When I do that, the text inside my Awesomium window gets warped a little (see screenshots below). That's because that window THINKS that it's maximized, but the screen has been compressed by 20 to 30 pixels; whatever the height of that separate, docked window is.
Other programs seem to be smart enough to render text appropriately when I add/remove my docked program. Also, when I view these web pages directly in a web-browser, they get resized properly after the dock change. It's only when they're inside of this Awesomium control where they don't respond properly to another program being docked. How can I make my html controls behave this way inside of the Awesomium window?
Update: I tried 1.7.3 as well, but the problem still exists.
Update: I also posted this question on answers.awesomium.com and awesomium.zendesk.com, but that hasn't helped.
SCREENSHOTS
Maximized without a docked program present:
Maximized WITH a docked program present and warped, compressed text: