I am trying to play a simple audio file via javascript on page load which works on browsers and mobile devices but same not working with android 4.4 version.
Below is the code snippet:
<audio controls id="player">
<source src="testaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
var audiofile = document.getElementById("player")[0];
audiofile.load();
audiofile.play();
</script>
Please let me know if I am missing something.
Thanks in advance.
Related
I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:
<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:
Removing overlaying divs won't fix it
Removing z-index won't fix it
Wifi or Cellular doesn't make a difference
Video filesize doesn't make a difference, too
Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9
Does playsinline attribute help?
Here's what I have:
<video autoplay loop muted playsinline class="video-background ">
<source src="videos/intro-video3.mp4" type="video/mp4">
</video>
See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/
iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.
Here is the little hack to overcome all the struggles you have for video autoplay in a website:
Check video is playing or not.
Trigger video play on event like body click or touch.
Note: Some browsers don't let videos to autoplay unless the user interacts with the device.
So scripts to check whether video is playing is:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});
And then you can simply autoplay the video by attaching event listeners to the body:
$('body').on('click touchstart', function () {
const videoElement = document.getElementById('home_video');
if (videoElement.playing) {
// video is already playing so do nothing
}
else {
// video is not playing
// so play video now
videoElement.play();
}
});
Note: autoplay attribute is very basic which needs to be added to the video tag already other than these scripts.
You can see the working example with code here at this link:
How to autoplay video when the device is in low power mode / data saving mode / safari browser issue
I had a similar problem and I tried multiple solution. I solved it implementing 2 considerations.
Using dangerouslySetInnerHtml to embed the <video> code. For example:
<div dangerouslySetInnerHTML={{ __html: `
<video class="video-js" playsinline autoplay loop muted>
<source src="../video_path.mp4" type="video/mp4"/>
</video>`}}
/>
Resizing the video weight. I noticed my iPhone does not autoplay videos over 3 megabytes. So I used an online compressor tool (https://www.mp4compress.com/) to go from 4mb to less than 500kb
Also, thanks to #boltcoder for his guide: Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)
I had the same problem - the video not play on iOS. I tried all the code options "playsinline autoplay loop muted". The problem was the video I received was in the wrong mp4 codec. So what helped us, was to upload the video to Vimeo and download the HD Version again. The video is now playing on all mobile devices.
You could also try to use mpeg streamclip. Here is a screenclip of VLC - those are the correct settings. Hope someone does not have to spend 2 hours searching for the problem - happy holidays
Here is a simple solution to auto-play the video in IOS, I've already tried and it is perfectly working on IOS, Android, also on all the browsers on various platforms.
simply use (data-wf-ignore) and (data-object-fit) Attributes for the video and data-wf-ignore for the source tag..
You can see the working example with code here at this Snippet:
<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>
I have an audio element with a mp3 src that is being played successfully on chrome desktop but when I try to play it on a mobile chrome browser it does not play.
<audio id="my_sound">
<source src="sounds/alarm.mp3">
</audio>
The invoke code:
$("#my_sound").get(0).play();
The audio is played when a view is finished loading and not as a onclick event.
any idea what can I do?
I have an app where some videos are placed using html5 video tag. It works fine in Chrome Browser (desktop), but does not play on android (tested on tablet with android 4.3). It just shows player with black background (no video).
I have tested with my Nexus 5 (android 5.1.1) and it works fine.
Î have tried this html:
<video id="video" controls>
<source src="../videos/portfolio.mp4">
<img src="../images/pf_preview.png" width="100%"/>
Your browser does not support HTML5 video.
</video>
<script>var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false); </script>
I deleted type of video, and put the js code to play video manually. But it still fails to play.
Any ideas how to fix it?
Best
We are developing an application that needs to auto play a live streaming video in mobile. At the moment we been only able to start the streaming by clicking over the video.
How to auto play live streaming video on mobile (inside the html)?
How to prevent the click over the video opening the mobile video player?
I've seen some articles saying neither are possible but both works on this site: webcams.com (adult)
Thanks,
<video autoplay = "autoplay" or "" (empty string) >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
autoplay Instructs the UA to automatically begin playback of the audio stream as soon as it can do so without stopping.
The <video> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
I have the same requirement before.
As I know, it is disable to auto play in some mobile browsers.
If your case can accept no auido, and then you can refer this page.
It uses canvas and WebSocket to draw the video.
In my app, there is an audio tag, playing a MP3 file. When I minimize the app, the audio stops. So, I want to know how to keep it playing.
PD: I use JavaScript.
See this post on the win8 developer blog. It discusses (among other things) the background audio support in Windows 8.
As described in this article:
http://msdn.microsoft.com/en-us/library/windows/apps/hh452730.aspx
You can add the msAudioCategory attribute to your <audio> tag for more functionality.
For example:
<audio msAudioCategory="BackgroundCapableMedia" controls="controls">
<source src="song.mp3"/>
</audio>