I'm stuck in a project where I want to auto play video using html5 video. It works fine on desktop browser, but on Android 4.1 default browser it requires me to "touch" (or click) video element (or play button)to play video.
I have tried number of ways:
use trigger
manually calling play function on page load
using autoplay attribute
but none of above works in Android browser.
One solution which I think is to simulate click event on page load but is it programmatically possible to simulate click function?
Referring this answer.
For Android < 4.2.2 it seems that the last DOM event you get is loadeddata. You likely won't get canplaythrough. To autoplay, you then use javascript
var myvideo = document.getElementsByTagName('video')[0];
myvideo.play();
For Android 4.2.2+ all you need in your native code is
WebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
Related
I'm maintaining a legacy ASP/VBScript application for some warehouse scanners. They run Android 7 with Chrome 64. I can configure Chrome however I want so I'm not constrained like a normal website would be. Due to the nature of this web application, playing a sound on page load would improve usability (when the submitted action fails). Is there any way to allow an audio file to play on page load?
I can play sounds easily after a user interaction. However, I've tried multiple methods to play a sound on page load without success:
An <audio> tag with autoplay does not play (<audio autoplay="">).
Play the sound during the load event (Audio.play()). The returned Promise fails with the error:
NotAllowedError: play() can only be initiated by a user gesture.
Create an Audio with autoplay, and append it to body during the load event.
Create an Audio, append it to body, and .play() it during the load event. Yields the same "NotAllowedError".
Whitelisting the website for sounds in Chrome.
Ensuring the media autoplay setting is set to allowed in Chrome.
Both Chrome and Firefox, have dropped support for the autoplay attribute for both audio and video unless it's a video with the sound muted.
You can read more on that here: Autoplay Policy
However, recently I found a workaround using the Howler.js library, and it seems to work quite well in just these lines of code:
let timer, sound;
sound = new Howl({
src: ['<?= get_theme_file_uri() ?>/images/spotAudio.mp3']
});
sound.play();
You can download the library and read the docs here: https://howlerjs.com/
Does anyone happen to know how to capture the event and/or click event with JavaScript for the user actually choosing to download the media in Chrome's native HTML 5 media player?
In newer versions of Chrome there is a native browser HTML 5 Audio/Video player control that allows the user to download the media (I know this applies to at least Version 55.0.2883.87).
The answer for this could involve some kind of Shadow DOM trickery.
<audio preload="none" controls="true" src="file.mp3"></audio>
Not sure if HTML5 video player has any native event where it can capture start of download but it has stalled | onstalled event which Occurs when the download has stopped.
video.addEventListener("stalled", function () {
alert("Download was stalled");
}, false);
I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)
Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.
HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).
I'm currently creating an iPhone web application for piano chords, and I wanted to add an option that would let the user press a Play button and play the selected chord. However, I'm not sure how to do this, or if it's even possible.
Basically, is there any way to programmatically (through Javascript) play a sound file (wav, mp3,...) in the background? (i.e. not leaving the page)
Thanks for any help!
(Keep in mind that I'm developing a web app, so I'm using HTML, CSS & JS, not the native SDK)
short answer: no
from the docs:
Safari on iPhone plays audio and video
in webpages in fullscreen playback
mode only.
yes you can.
http://www.schillmania.com/projects/soundmanager2/
see it in action at soundcloud.com
With HTML5 audio, iPhone can play without fullscreen.
IOS requires sound be played with the press of a control button. If you are looking to autoplay a sound at some event on an HTML page, forget it.