I am trying to play a video on a canvas, and by this I can control the area of the video that is displayed.
I can achieve this on desktop or Android browsers. However, on iOS Safari, I can not play a video that is hidden. When I call play() method on a video element (which I have to register on a user-trigger event callback), the video player will pop up at the very top layer of the webpage, even if the video element is NOT appended to the document, and after I close this player, the video will be paused.
Is there a way to disable this poped player and just play the video in the background?
I am trying to play a video on a canvas, and by this I can control the area of the video that is displayed.
I can achieve this on desktop or Android browsers. However, on iOS Safari, I can not play a video that is hidden. When I call play() method on a video element (which I have to register on a user-trigger event callback), the video player will pop up at the very top layer of the webpage, even if the video element is NOT appended to the document, and after I close this player, the video will be paused.
Is there a way to disable this poped player and just play the video in the background?
Share Improve this question edited Mar 9, 2023 at 10:33 leetom asked Mar 9, 2023 at 3:10 leetomleetom 7731 gold badge8 silver badges31 bronze badges1 Answer
Reset to default 4After I searched for the Safari related security policy, I found this post from webkit.
According to the policy, I can use playsinline to get rid of the fullscreen player. However video.playsinline = true; won't work, and video.setAttribute("playsinline", true); will do the trick. They say this property is a standard one now and I have no idea why I still have to use setAttribute. After this, I can set the video invisible with css like other browsers.
Btw, set the video muted will make the autoplay attribute taking effect.