I'm building a website with HTML5 audio, including custom audio controls and visualization using JavaScript.
When opening the website in my mobile browser (I've only tested Android/Chrome, but I assume similar behavior on other systems), after a few seconds the screen will turn off and soon after the audio will stop playing.
Is there an official way in HTML oder JavaScript to tell the browser to keep the audio playing with screen turned off?
Side information: there is Screen Wake Lock API preventing the mobile screen from turning off. Since my website provides music, I want the phone to turn off the screen if desired, only keep playing the audio.
I added the mentioned Screen Wake Lock API on my homepage, activating it as soon as the user starts the music and the screen doesn't turn off by default anymore. However, if I now turn off the screen manually (Android/Chrome), the music will keep playing.
This solves the issue in the case we are fine with having the screen staying on by default, so for me this question is answered.
Related
I have a MP4 video of a product which shows a 360 of the product (so it looks like it's spinning) - I have it autoplaying on the page and looks great.
I want the user to be able to click and drag on the video to basically rewind or fastforward the video, so they can kind of scroll back and forth and spin the product around as they wish.
We have used the js-cloudimage-360-view library and used images, but because we wanted this as smooth as possible each colour had 360 images and loading times weren't great, we have MP4s which are small in size and load fast but it's just the srubbing I can't get right.
I'd had a look at this https://codepen.io/webandapp/pen/xEjjOJ too but it's supper jumpy, essentially we want if the user drags to the right it fast forwards as they drag, when they stop it should play from that point (and rewinds if dragging to the left) - this should be as smooth as possible.
The video is just a HTML video element like so:
<video id="three-sixty-video" preload="auto" controls loop playsinline autoplay muted>
<source src="/video/video-1.mp4" type="video/mp4;">
</video>
Scrubbing on a streamed video is limited by the speed at which the video can be downloaded, decoded and displayed.
For a large video on most devices and connections it is not practical/possible to do all this as quickly as a user can scroll along the video timeline.
This is why video containers (mp4 etc) often include a track of thumbnail images which are displayed when the user scrubs along the line.
In other words, it is not actually the video you see in the small image in the timeline, but the appropriate thumbnail for that time in the video.
When the user stop scrubbing, the player then requests that section of the video, decodes and displays it. This is (generally) not immediate.
If your video is small enough and is downloaded completely then you may find you can scrub as quickly as you want, but even then it may be device/client dependent - a quick local test with a number of videos seem to suggest it should scrub ok when available locally:
Using a relatively small 30MB, 50 second local mp4 video, available locally on he computer hard drive (a MAC), scrubbing is relatively smooth using the Quicktime client player.
The same video on the same device being viewed by the Safari browser rather than directly by the QuickTime client appears to be similar, although it is hard to be sure. The playback may well use very similar paths under the skin.
Using a much larger 2G, 4K, 2 minute 30 second video, also locally on the hard drive, scrubbing is again relatively smooth both in Safari and QuickTime.
As a side note, if you do decide the solution is to have the video fully downloaded before you play, that is also an interesting challenge. Most effort is usually focused on the opposite, allowing a video to start playing before it fully downloads. You may find that, providing the video is not too big, having the header info at the end (the MooV atom for mp4) will force the browser to download it fully. This is the opposite of the mp4 faststart you will see discussed some places. I'm not sure how reliable this will be as I think some browser may be clever enough to 'search' in the video by making different requests for bytes at the start and end to find the metadata.
After some time of inactivity my laptop screen will darken and then turn off, as specified by my power saving settings. However if a YouTube video is playing then this doesn't happen. So either youtube.com is preventing this or my OS disables this power save feature when a webpage is playing a video.
I'm making a web application exercise timer. As the user is exercising when using it, they don't touch the mouse or keyboard meaning that the energy save kicks in and turns off the display. From test usage I can say this is very annoying!
How can I disable this behaviour while a exercise timer is running? I suppose I could hack it with a hidden video playing in the background but I was hoping for a better solution.
This question is a duplicate of: Can I prevent phone from sleep on a webpage
However it's a bit out of date, there is now a Wake Lock API but it's still experimental: http://boiler23.github.io/screen-wake/
Ive decided to go with a library, this seems the most popular: https://github.com/richtr/NoSleep.js
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!
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.
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
I built a fitness "progressive" web app that you can add to your phone home screen. It guides the user through a 7 minute workout.
Is there any way to keep the screen "awake" so the user doesn't have to keep coming back to the phone to turn it on? Another drawback to the screen sleeping is the javascript timer stops, ruining the workout timing.
https://www.w3.org/TR/wake-lock/
https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Wake_Lock_API
Basically, yes, there is such a thing as a website forcing the screen to stay awake, but it is non-standard currently. It may become standard but right now it seems to only work on FirefoxOS. This is however to be the intended way to achieve wake locking in javascript.
Another solution though that's more of a hack is doing something along the lines of playing a hidden video in the background since as far as i know most browsers stay awake if a video is playing.
What's the best way to show an animation from after effects on a website onload?
It needs to play like a load screen in all major browsers and iOS devices.
What's the best way to show this?
I tried html5 and the auto play didn't work on iPad. I don't want to use flash. The animation is too complex for just JavaScript. Is it worth trying to make a high quality animated GIF?
Well, your main problem with virtually any onload video is going to be load and buffer time, especially on a mobile device. If the splash screen takes half a minute to load, the experience will be very subpar, and there's virtually nothing you can really do to reduce that load time short of making the video low quality (a large animated gif will have the same problem).
My recommendation would be to try coding the animation using pure HTML5 animation effects if possible. They will render faster, use only static images, javascript and CSS, and will be more widely compatible with modern desktop and mobile browsers.
Unfortunately, it is not possible to auto-play html5 video on an iOS device. At least as of iOS 5, Apple has disabled both auto-play and pre-loading, presumably to save bandwidth for users who may be on limited or expensive mobile data plans.
Unless you're willing to skip the video, the only workaround is to get the visitor to click or touch something on the page. Mobile Safari will allow you to play a video using Javascript methods (as opposed to the native player controls), but the first call to .play() has to come from a "click" or "touch" event handler.
You can limit this requirement to iPads and still allow desktop browsers to auto-play, but there doesn't appear to be any kind of reliable feature-detection method, so you have to parse the User Agent string (navigator.userAgent).
There isn't much documentation on the strange, non-standard things Mobile Safari does with video, but this article has some very good, detailed information and some code samples:
http://blog.millermedeiros.com/html5-video-issues-on-the-ipad-and-how-to-solve-them/
Edit: And then there's this elaborate and absurd workaround that Apple uses on its own site.
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI