I have a simple video which I need to autoplay on any browser on android mobile devices.
Here is what I have implemented
https://output.jsbin.com/bovarep
<video poster="https://dj7u9rvtp3yka.cloudfront.net/layout/video_posters/THAMarchEditorial/TOP5TRENDS-1p777-en_v1.jpg" class=" m-u-media wrapper__video" autoplay preload="auto" muted="" loop="" media_id="media1">
<source src="https://dj7u9rvtp3yka.cloudfront.net/layout/streaming/THAMarchEditorial/TOP5TRENDS-en_v1.mp4" type="video/mp4">
<source src="https://dj7u9rvtp3yka.cloudfront.net/layout/streaming/THAMarchEditorial/TOP5TRENDS-en_v1.webm" type="video/webm">
</video>
The video will autoplay on some "OS version and Chrome version" combinations but doesn't autoplay on some other combinations. And the combination at which it works is random.
Please let us know if someone is facing the same issue or if someone has solved the issue.
Thank s in advance.
Additional info:
Autoplay works on (Chrome - 64.0.3282.137, OS - Android 8.0.0),
Autoplay doesn't work on (Chrome - 63.0.3239.111, OS - Android 7.0.0)
Found out what exactly was the issue.
So the issue is not exactly an Android OS version or Chrome version. Recent versions of chrome have 'Data saver' feature which prevents the chrome from loading and autoplaying the video, hence video doesn't autoplay even if it is muted.
To solve this issue, since there were no other ways to autoplay the video we just show a prominent play icon which tells the user that it is a video.
You can look into promise returned by calling video.play() based on which you can show the play icon in the case of failed promise.
More about HTML video promise - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
Let us know if anyone has a better solution.
Thank you
Related
I have this code to play a video on a mobile web browser, but it does not autoplay.
can anyone suggest ways to make this work on Android devices?
<video id="vidone" name="vidone" autoplay poster="eh5v.files/html5video/testx.jpg" style="width:100%" title="testx" preload='true'>
<source src="eh5v.files/html5video/testx.m4v" />
<source src="eh5v.files/html5video/testx.webm" type="video/webm" />
<source src="eh5v.files/html5video/testx.ogv" type="video/ogg" />
</video>
This works on regular browsers and mobile browser simulators, but not on the actual device, I have tried multiple javascript options and still no code that works.
Autoplay on mobile devices is generally switched off by the manufacturers to avoid users racking up huge costs in downloading videos that autoplay.
This is a good thing.
You can't, and shouldn't, do anything about it.
Problem:
The videos are placed in my site: http://dege.cloud/ (click on one of the pictures)
When I load the page on my desktop or on firefox mobile everything is fine.
When the same page is loaded on chrome for android the video is black without controls, the videos don't have audio, so I don't know if it plays.
Expected results:
The videos should be playable, hml5 video tag doesn't start automatically on mobile, but that's not a problem.
Analysis:
The Content-Type of the videos are correct and inspecting the console on the device don't provide errors.
I gave webm and mp4 version of the videos (ripped from http://giphy.com/ ).
The code for the video is this:
<video autoplay muted loop class="img-responsive img-centered">
<source src="img/portfolio/campominato-video.webm" type="video/webm" class="img-responsive img-centered">
<source src="img/portfolio/campominato-video.mp4" type="video/mp4" class="img-responsive img-centered">
<img src="img/portfolio/campominato-screen.png" class="img-responsive img-centered">
</video>
jsfiddle of the problem in action:
https://jsfiddle.net/Dege/1es4516p/
From what I can tell, the problem is the expectation that it would autoplay; while chrome Android 53 will autoplay muted videos, the current default version (51) won't.
In any case, if you add the controls attribute to the video element and press play, the video correctly plays, which confirms it is not an encoding issue.
(FWIW, the jsfiddle has 3 slashes in the http scheme used to load the videos; that's not the issue, but you might want to fix it nevertheless)
I have a web page, and I want music to play automatically, in a loop from a hidden source. I tried the audio and video tags, but that evidently isn’t supported yet. So I then I tried the embed tag, which will play the song, but I cant seem to have it happen in a loop, or automatically when the page is loaded. This embed tag is in the body of my html file:
<embed src="hereiam.mp3" AUTOSTART=TRUE LOOP=TRUE hidden=TRUE>
what can I do to get this song playing on android devices?
There isn't much you can do about audio since support has just been realsed for the latest versions or the android browser. Check this resource for more details about browser support http://caniuse.com/#search=web%20audio%20api
I would suggest you look into javascript libraries such as http://kolber.github.io/audiojs/
Quoting from the audiojs site about browser support:
Mobile Safari (iOS 3+) Android (2.2+, w/Flash) Safari (4+) Chrome (7+)
Firefox (3+, w/ Flash) Opera (10+, w/ Flash) IE (6, 7, 8, w/ Flash)
html5 works on the android Chrome browser
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
From W3Schools
Hope that helps!
I try play a video in html5 page on Android emulator 0f version 4.0, and I found that the screen
is black(can not show the video picture) and the audio play normally. I have searching the Internet for a couple of hours, still I can't get the answer I want. Can someone tell me reason or the solutions? By the way, I'm sorry for my poor English. Code is listed as below:
<div id="CHPlayer">
<video id="video" usemap="#Map" poster="./sources/1/t2.jpg" xmlsrc="./sources/1/t2.xml">
<source src="./sources/1/t2.mp4" type="video/mp4">
</video>
<img id="insertBar" src="./sources/1/t2.jpg" usemap="#Map" />
</div>
Does your video fit under the android requirements? Take a look at: http://developer.android.com/guide/appendix/media-formats.html
Also check under the initial grid for the encoding requirments.
If it is compatible then you also may have to make sure it isn't the emulator.
I want to play audio in the Android browser, using the html5 <audio> tag. It works fine in the iPhone browser, but not in Android. I'm using Android Virtual Device 4.0.3.
Does anyone know why?
The Android source:
webView.loadUrl("file:///android_asset/www/test.html");
The HTML file:
<audio controls="controls" format="mp3">
<source src="achievement.mp3" />
</audio>
(i couldn't hear the audio with <embed> and <object> tags either)
I found the solution here
Embed Background Audio in Android >= 2.3 Browser
<audio id="audio1" controls="controls" loop="loop" autoplay="autoplay" >
<source src="scene1.mp3" type="audio/mpeg" />
<source src="scene1.ogg" type="audio/ogg" />
</audio>
it's work for me :)
I did a quick search and found this issue report on google code. It seems the tag is unsupported. However, the tag is and can play mp3 files. The down side is (if I read it correctly) that the controls are not available. Give it a read and let us know how you make out.
I found another question that has lots of different possible solutions: Check it out