In Chrome, right-clicking a video element brings up a context menu with a "Picture In Picture" option. In Electron, right-clicking does nothing. How can we implement Picture In Picture in Electron?
Did you try
document.getElementsByTagName('VIDEO')[0].requestPictureInPicture()
For a full description the currently available API, see https://developer.chrome.com/blog/watch-video-using-picture-in-picture/
One option is to enable the controls-prop of the underlying <video> element:
<video id="video" controls>
<source src="flower.mp4" type="video/mp4">
</video>
Related
I'm writing an app which uses html5 video elements.
On iOS Safari when using playsinline to ensure the video is treated as an inline element for positioning etc, it works as expected except that the video appears on top of everything. z-index and positioning techniques don't seem to help with this issue. I cannot get anything to appear on top of the video under any circumstances.
On every browser except iOS Safari this seems to work absolutely fine.
For reference, this is an Angular app, and I'm currently testing in Mobile Safari on iOS 11.1.2
Also worth mentioning, the video src will resolve to a local blob url. eg. blob:file:///2afb998a-84e3-4819-8243-5da7d7da3cb6
<video
id="video"
[src]="src"
autoplay="autoplay"
muted="muted"
webkit-playsinline
playsinline>
</video>
I had the same problem. Removing overflow style from parent div of video tag solved it. See Video and z-index inside scaled element: some divs disappear for more information.
<div ng-show="showVideo">
<video id="objvideo" ng-src="{{videoURL}}" class="col-xs-12" style="float:none" controls>
<source type="video">
</video>
</div>
I have the above code in my html file to show a video which has been uploaded. The problem is only in Ipad I am not getting a thumbnail preview for the video. It just shows a play button. The video plays and function perfectly, but the preview doesnt come up.
When I opened same page in chrome in my desktop and emulated Ipad , I am not able to repro.
You dont need the {{}} in ng-src
Only when you say src="{{myVar}}"
Or try removing the ng-src since you already have a source tag
you should use and remove ng-src="{{videoURL}}" from video tag and add it into source tag
I have an Angular app displaying a video like this:
<video ng-if="videoToPresent.shouldShow" width='640' height='360' controls autoplay>
<source ng-src="{{videoToPresent.url}}" type="video/mp4" />
</video>
This worked perfectly on mobile Safari until the new iOS 10 update. Now, it renders the video poster and the play button in the center, but it does nothing upon clicking the play button.
I read an article in WebKit's blog describing how use of the playsinline attribute is supported, so I tried adding that as well but without any success.
Anyone know what's going on with the new update? Thanks!
I've been frustrated by trying to get an HTML5 video to play on an iPad. At first, I assumed it was a codec problem, but even after following all advice I could find on the internet to fix it, it still wasn't playing. However, I realized that it's not a problem with the codec, as shown by this: the video doesn't render inside the main page, but if I go to the link where the media file is stored, it does show. Here's the offending code:
<video autoplay loop controls id="hipplay-video" class="video-top">
<source src="wp-content/uploads/2013/05/Hipplayapple.mp4" type="video/mp4" />
<source src="wp-content/uploads/2013/05/Hipplaywebm.webm" type="video/webm" />
<source src="wp-content/uploads/2013/05/Hipplayogg.ogg" type="video/ogg" />
Your browser does not support the HTML5 video tag.
</video>
If you have an iPad and you go to http://www.hipplay.com - the video at the top does not play. However, if you visit http://www.hipplay.com/wp-content/uploads/2013/05/Hipplayapple.mp4, the video plays just fine.
Any ideas what I'm doing wrong or how I can fix it?
It turns out that iOS does not like when you insert your own controls with JavaScript AND doesn't like it when you autoplay videos. When I turned those features off (using a poster instead), everything worked as expected.
With iOS6 the old embed code no longer works, it just opens the video in Safari
I tried to use the new embed code, but when I make this dynamic it opens the video in Safari.
When I add a static entry in the webview it works, but it's rather slow and a lot of dom elements are injected
An example for the new embed code;
<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe>
I was thinking to use the HTML5 video tag and find out the url for the video, but this probably violates the Youtube TOS
Any suggestions?
The solution is to set OpenAllWhitelistURLsInWebView to YES in Phonegap settings