I'm working on a site that uses a video recorded via the user's webcam. The recorder library is not my code, but at a high level, it tries to use HTML5 (Media Recorder API) where possible and falls back onto Flash where not. On Safari, this means Flash. Basically, I supply the library with a div where I want the recorder to appear and it inserts it there.
However, some of my users were reporting confusion on Safari (the video recorder was not showing up) and I was able to reproduce this confusing situation. With Safari 12.0 on Mac OS 10.13.6 with Adobe Flash installed and enabled in Safari:
when I navigate to the page with the video recorder, I expect to see a "Click to use Flash" button on the video recorder area. But, when I first load the page, the area is complete blank. Strangely, it appears that the button is indeed there, but just not showing:
When I click on the area where the button should be, it responds (and prompts me to enable flash)
When I open the Web Inspector tool, the button appears (you can also see the code for the Flash object here that gets inserted dynamically)
When I simply resize the window, the button appears
I don't use Safari as my regular browser, so it's not like I have a highly customized configuration. Unless I'm missing something, this feels like a bug in Safari (I filed a bug report, but they specifically say they do not respond).
I've tried some javascript tricks to "re-draw" the element (e.g. hide then show) to try and get the button to show up right away, but without any luck. Obviously I can't tell users "resize the window" or "click in the middle where there is supposed to be a button".
Any ideas what could be causing this and how to fix it?
Related
I'm trying to trigger Pictuer-in-picture (PiP) on a HTML video using the following code:
await videoElement.requestPictureInPicture().catch((error) =>
alert(`PiP failed, ${error}`);
);
This works fine in Safari, but when you use 'Add to home screen' with "display": "standalone" set in the manifest, this code returns an error saying picture in picture is unsupported.
Additionally the built-in PiP control is missing from the video player.
Any ideas why this is happening or how to fix it? I assumed the PWA/standalone version uses the same browser/js engine behind the scenes as regular Safari on the device, but it looks like it may be different?
As of March 2021:
Unfortunately, I don't think there is a way to trigger PiP mode in PWAs (yet).
The API is missing in standalone mode.
I did some research and tried to find some workarounds.
The only thing that somehow works is to force the user to load the page containing the video in Safari. In order for this to work you have to play with the scope param inside your manifest.
Put your PWA in a subfolder like /pwa and set "scope": "/pwa"
Put your Video pages in another subfolder like /videos
Everytime a user navigates to a video page, the scope of your PWA will be left. As soon as this happens, your PWA will leave the fullscreen mode and safari will render its top and bottoms bars.
Inside the bottom bar will be a small safari icon. The user must click it. Safari will open, PiP will be available.
To make the process a little bit smoother you can render a custom PiP button as video control. If the user clicks it, you check if your app is running in standalone mode by checking window.navigator.standalone. If it's false, just request PiP.
Otherwise, you navigate out of your PWAs scope. Use the history API (history.pushState) to change the location without reloading the page. You can add a query param like autopip=true. Finally, you show an overlay describing that the user should click the safari button in the bottom right corner.
Safari will open the page you pushed to the history. In Safari, check if the query param autopip=true is set and use JS to request PiP after video has loaded.
The big gotcha: There is no way to redirect the user back to your PWA.
I designed a website for a client and had a developer (better than me) put together some Javascript which shows a video on hover. Works fine on all browsers except safari; it has a strange quirk.
The first time the page loads and the user performs the hover, the video plays no problem. If the user clicks on another tab (in the same browser window) and tabs back to the page, the video doesn't show. Just a box where the video should be.
Here's the page where you can see it in all its glory: removed
Video is MP4 H.264.
What the hell is the problem? The developer can't solve the mystery. Can you?
I've got a very basic HTML page, which only has to show a javascript alert.
I hear the sound that it's supposed to make when it pops up, but it's not popping up! I don't see it anywhere (in google chrome it does pop up). I also can continue working on my page without clicking "ok" on the (invisible) alert box, so that means that it really isn't there!
Any clues on how to solve this? I already rebooted my pc and disconnect my multiple monitors.
<script>
alert('SHOW!!');
</script>
More info:
My IE version is IE11
The popup did work properly before, without making changes to IE
On other websites, the popup isn't showing aswell
I did reset my IE properties (to factory default), no result
unable to test on older versions
Javascript is enabled
There are a lot of tutorials on how to do this, and the crux of it seems to be changing the title constantly so the browser tab or taskbar will flash, however this doesn't seem to work for me.
I can see the tab changing its title, but it doesn't flash, so I am wondering if this is something which is no longer allowed by browsers?
I am using Windows 8.1, however have also tried Windows XP
I am using Firefox 25.0.1 and Chrome 31.0.1650.57 and neither of them react how I would expect.
As an example go to:
https://rawgithub.com/heyman/jquery-titlealert/master/example/index.html
(Make sure you click the shield icon in your url bar to allow the scripts to run on that page)
Then if you click the default example button and switch tabs, I would expect the tab hosting that page to blink or flash to indicate the tab has new content, however it doesn't do that for me, although I can see the text changing constantly.
Does anyone else have this issue and know how to solve it or why it occurs? I am looking to implement a feature in a chat system where it notifies you to new messages, however for some reason the code works fine and the title changes, but the taskbar or tab do not flash or anything and the users are really wanting this feature soon.
There seems to be no information on the internet related to this so im a bit confused and came here as a last resort.
In Firefox, tab flashes when title is changed ONLY if it is a pinned tab.
When you download a file on CNET.com, a message will display on the page to wait a moment and the download will start; if it doesn't, click the link. That's very similar to the page with which I'm working.
The user clicks a link and this page appears with a similar message to CNETs. The only difference is the file is a WMV file and it automatically opens and plays. It works fine in IE. It's not working correctly in Firefox. In Firefox, if the user goes Tools->Options->Applications and selects "Use Windows Media Player" for Windows Media Video File, it plays in the external WMP. If the user uses the WMP plugin, however, the page opens up a blank window and then plays the video in the external WMP.
window.open("test.wmv");
Is there a way to prevent it from opening a window or how can I close the window after the wmv is downloaded and played?
Thank you very much.
Update
I found a link, here, that may be related to this issue. It states that the blank window is a bug with how Firefox handles the WMP plugin, with respect to ASX files. The only difference between the link and my question is one file is of type WMV and the other is of type ASX. The link is dated 2007 and the problem is reported on Firefox 1.5, but perhaps it still has merit. Maybe Mozilla has not addressed this bug, ever (FYI: I'm using Firefox 9.0.1).
I'm starting to think there is no direct solution. I can put a disclaimer, inform the user to turn off the WMP plugin in Firefox. Would a modal window or iFrame be helpful?