Background image when recording video in safari - vue.js

I have a video recording with the ability to choose a background (for example, blurry or upload your own picture). It doesn't work in safari (but works in chrome and other browsers) and I get this error. Can you tell me how to solve this? Project on the vue
error image in console-safari

Related

Appium test shows "Automation Running" overlay on iOS15 - How can I get rid of it?

I am using a tool to automate tests on iPhones. The tool uses Appium as the test framework. In iOS version 15, the screen shows a dark overlay with the text "Automation Running". I am aware that this does not affect the test at all.
However, my problem is that I use a camera placed in front of the mobile phone to capture the screen and do some checks on the captured video. I have to use the camera itself since I run tests on OTT applications and there is no way to capture the video using software mechanisms because of DRM protection. This "Automation Running" overlay messes up with the checks that I am running on the video captured through the camera.
Is there any way to get rid of this overlay in iOS15 when we run Appium based tests?
After extensive exploration, I have come to the conclusion that there is no way this overlay can be gotten rid of unless Apple wants to.

Netflix video does not autoplay on chrome

I am trying to autoplay Netflix video using Selenium on chrome on a Linux machine. I open the video using the following url: https://www.netflix.com/title/<video_id>. Normally, the video starts playing once the page loads. However, with selenium, the video page opens up and a play button comes up. The video does not play until I click button manually. Is there a workaround such as opening chrome with specific flags to disable this?
One workaround that I found was to mute the Netflix video. I think this has to do with the new updates to chrome wherein video can only be autoplayed if they are muted.
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Safari HTML5 video no longer autoplays

Recently I have noticed that the video elements on my site no longer autoplay on iOS Safari or desktop Safari.
The current code looks something like this:
<video playsinline autoplay muted loop poster="/path/to/poster.jpg>">
<source src="/path/to/video.mp4" type="video/mp4">
</video>
From my understanding, this is enough to abide by Webkit's new video policies for iOS and MacOS to allow for a video to autoplay.
I have searched for similar questions and not come across a solution. In this question it seems like the source tag itself could be the problem.
This thread suggests that iOS blocks videos from autoplaying on low power mode as well. But I've determined this isn't causing my issue.
Has anyone come across this issue themselves? Do you have a solution? Can someone point me in the direction of some Safari change logs where this breaking change was introduced?
Details
iOS 11.4
MacOS Safari Version 11.1 (13605.1.33.1.2)
EDIT
The video isn't being loaded correctly, when I check the Network panel in Safari dev tools the MP4 shows up under 'Other' with the error "An error occurred trying to load the resource".
If I try to play the video directly in Safari (eg: go to https://my-website.com/path/to/video.mp4) I get the error Failed to load resource: Plug-in handled load
I think it's because my video is a file blob, and Safari expects videos to be from streaming servers (as mentioned in this question)
EDIT 2
Might be something to do with how Safari is introducing the ability to use videos in img tags? See this and this

VideoJS font not applied to controls in Firefox 22

I did everything according to the setup instructions and got the video.js player play my flv video. The only problem is that the UI is broken in Firefox 22 because the font that is loaded correctly is not applied to the controls. I only see a box with some numbers inside instead of a play button for example.
This works in Chrome correctly.
I double checked with Firebug that the font file is loaded from the server and there are no problems.
Firebug shows this when I inspect the play button:
content: "";
And if I hover font-family I see the VideoJS font sample displayed.
It was the same origin policy. I was working on a development subdomain but the font was hosted on the main domain and that's why Firefox refused to use it. (Chrome used it)

How to keep html5 video from allowing display to sleep on OSX

I have a webpage with html5 video displaying an HLS video in Safari on OSX. When I click the full screen button the video plays in full screen, but the screen dims according to my OSX display settings after 1 minute of being idle, no keyboard or mouse interaction.
This does not happen if I play an mp4 video file from the local disk directly using Quicktime in full screen. In this case Quicktime is doing something to tell OSX not to listen to the idle-timeout.
My question is how can I make the html5 video page keep the screen from idle-dimming while playing the video in full screen on OSX (or any platform, if possible)?
The issue has been fixed in safari 5.1.4. Release notes are available here.
Fix an issue that could cause the screen to dim while watching HTML5 video