I want to make the audio to play when the page is loaded.
It is working well on PC and Android but not working on iPhone.
I know that Autoplay is forbidden on iPhone.
Are there any way to achieve this function on iPhone?
I know that Autoplay is forbidden on iPhone.
Correct. Audio autoplay will not work on iPhone, nor most other browsers on most platforms.
Are there any way to achieve this function on iPhone?
Not from a webpage, there isn't.
Related
I have some videos (H.264) cannot be played on mobile browsers but can be played on desktop browsers. I use the same browsers (Chrome, Safari) on both desktop and mobiles. However the video control on mobile browser is blank and seems like the video is not loaded correctly.
I am really confused about this issue, and the code I use is really simple:
<video controls style="width:100%"><source src="" type="video/mp4"></video>
My autoplay option of Cloudflare Stream tag is working perfectly on Safari, Chrome and desktop browsers but is not working on IOS.
Is there a way to start the video? Why this happens?
Videos on iOS will not start playing unless there is a user action on it.
If you want to autoplay a video in iOS, you have to play it as MUTED.
Also this workaround will not work --> autoplaying as muted, then unmute programatically as soon as the video starts.
One note though: autoplay on iOS will not work at all if power saving mode is ON.
To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
First, please consider apologies if the question is trivial. I tried to search but did not find a satisfactory answer.
I am trying to get the autoplay of html5 video working in android browsers. I read in other posts that autoplay for html5 videos is disabled in Android. However I am able to get it working for firefox and opera. I used javascript play(). But this does not work in the chrome and default android browser.
In chrome unless you touch(= click) the 'play' button the video will not play. So can this 'touch' or 'mouse click' event be virtually triggered on 'window load' so that autoplay works.
If yes can you please show the implementation of it?
Thanks.
In their infinite wisdom, Google has decided not to enable autoplay on Chrome for Android if the video is not muted. Their reasoning is apparently because it is resource/bandwith costly and "users" did not like it.
In other words: It will work on Chrome desktop versions and such, but when you have not added the keyword "muted" to the tag, it will not autoplay on an Android device.
<video id="player" class="player" controls autoplay muted>
Isn't that swell?
Read more here:
https://developers.google.com/web/updates/2016/07/autoplay
Could you not do something like this:
function playOnLoad() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
<body onload="playOnLoad();">
...
</body>
Got the code from here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Controlling_media_playback
I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
But this will again open the video(s) in a seperate window...
Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!
EDIT:
Markup is basic <video>-syntax btw:
<video autoplay loop>
<source src="vid.mp4" type="video/mp4" />
<source src="vid.ogg" type="video/ogg" />
<source src="vid.webm" type="video/webm" />
</video>
Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:
Multiple Simultaneous Audio or Video Streams
Currently, all devices running iOS are limited to playback of a single
audio or video stream at any time. Playing more than one video—side by
side, partly overlapping, or completely overlaid—is not currently
supported on iOS devices. Playing multiple simultaneous audio streams
is also not supported. You can change the audio or video source
dynamically, however. See “Replacing a Media Source Sequentially” for
details.
No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.
YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.
Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none
<video src="vid.mov" preload=”none”></video>
should work.
Also, have you tried using the Video For Everybody approach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.
EDIT: In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaround for the no-multiple video playing problem.