Reputation: 15
I'm currently working on something that uses a livestream from Ustream as a fixed background. At the moment, it only works on desktop, and I personally think that it wouldn't be the best idea to do this for mobile because of performance and so on (not to mention, I would hate for my mobile data to be chowed down by a video I cannot control). I'm simply curious if it is possible at the moment.
I tried it, just for fun, but realized that it doesn't autoplay and if I do initiate it by hitting play, a media player opens up with the stream in it - at least on iOS.
Just got me wondering if this was possible. I mean, facebook and instagram do it without opening up a media player, so I'm sure it is, but I'm assuming it's not as straightforward as I would want it to be.
Curious to hear your thoughts!
Upvotes: 0
Views: 79
Reputation: 157
It is possible, there is a good article on it here.
As the article describes...
By default, it can only autoplay when the video is muted. But for webkit/iOs you also need a second attribute; playsinline. This attribute makes it so that it, well, plays inline (and doesn’t automatically jump to fullscreen video)
More information from google and webkit
Upvotes: 0
Reputation: 1332
It is possible, but I guess more likely it depends on the device and the browser what it using, I tried now with this url: https://www.nationalgeographic.com/magazine/2017/09/holland-agriculture-sustainable-farming/ on my S9+ with the Samsung browser and it works for me if I ask the desktop version of the website. However I suggest to forget the background videos or the users will hate you when your app/site will consume all of their mobile data. And I don't want to mention the lower end devices. Those may not support or if support it will have a bad experience to view a background video.
For background video: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp Normally a real stream doesn't have too much difference compared to a static video if we just strictly viewing the background video/stream part.
Upvotes: 1