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
Related
My tag audio not function on mobile browsers, my code is the next:
Use different examples but not function Audio Tag Autoplay Not working in mobile
Autoplay is not supported on mobile browsers because it's too disruptive. Video has an option to autoplay if they are also muted. Google says "autoplay is still disabled on Chrome on Android, because muted autoplay doesn't make much sense for audio."
Ref: https://developer.chrome.com/blog/autoplay-2/
I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.
I am creating a video watching system with the HTML5 video tag. I have one problem and I don't know if the problem is because of my code or of Google Chrome.
Everything works fine until I try to drag the timeline bar or volume bar. Can anybody please help me? The problem is that the moment I click and unclick it does not stop dragging the bar around. So when I drag and leave it, it doesn't stop dragging. I have tried everything like clicking around but the only thing that worked was when I reload the page.
My code:
<video controls width="640" height="264" poster=""><source src="uploads/video1.mp4" />To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</video>
I Don't think your code is having any issue, It might be because of the type of mp4 file you are using.
Please use following piece of your code working perfectly fine (I have used different mp4 source file)
<video controls width="320" height="264" poster="">
<source src="http://www.w3schools.com/html/movie.mp4" />
To view this video please enable JavaScript, and consider upgrading to a web browser
that supports HTML5 video
</video>
I'm currently working on a project with a lot of videos and this project needs to work on iphone.
But actually, the ios's video placeholder doesn't allows me to scroll in my page. I try to apply the webkit-playsinline attribute on my video tag but it doesn't work.
Is there a way - in full HTML5/JS - to prevent the native behavior of ios video player ?
I note that this problem is only on iphone (ios 7), not ipad.
Thanks !
Here my video tag :
<video vineresizer preload="auto" poster="{{vine.src_poster}}" loop webkit-playsinline="webkit-playsinline" controls="controls">
<source ng-src="{{ trustSrc(vine.src_video) }}" type="video/mp4">
</video>
And my js :
var video = element[0];
video.addEventListener('contextmenu', function (e) {
e.preventDefault(); e.stopPropagation(); },
false);
if (video.hasAttribute('controls')) {
video.removeAttribute('controls');
}
I've been looking into this issue extensively as well.
Unfortunately, 'webkit-playsinline' only works in a UIWebView in a native app, and then only when a flag is set in the native code. See this question.
From Apple's docs it seems there is no way to prevent this default behavior, but you can still capture the 'ended' and 'paused' events from the native player as if it were simply an HTML5 player inline in the page. I.e. event listeners on 'ended' etc. should still work.
You can also get some state information from the native player: https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html
Overall, you can only interact with the native player in a very limited way, and no known overrides exist.
In iOS 10+
Apple will finally enable the attribute playsinline in all browsers on iOS 10, so this will work seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
You can reproduce the behavior by simulating the playback by skimming the video instead of actually .play()'ing it.
iphone-inline-video can take care of the playback and audio sync (if any), and it keeps the <video> working as it should.
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.