Google Chrome does not autoplay HTML5 video on mobile
The problem is that Google want that users initiate by themselves any media, so If you debug your device chrome browser, you will get the warning "Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture."
So that means you need to attach the video initialization, for example, with a click event
Video auto play is not working in Safari and Chrome desktop browser
The best fix I could get was adding this code just after the </video>
<script>
document.getElementById('vid').play();
</script>
...not pretty but somehow works.
UPDATE
Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted
attribute to the video tag too
<video autoplay muted>
...
</video>
HTML5 video autoplay not working in chrome
As per Google's latest policies, Muted videos can autoplay in Chrome. Autoplay with sound is allowed if:
- User has interacted with the domain (click, tap, etc.).
- On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound. - On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Also, put the following tag after your <source>
tag:-
<source src="assets/watertuin.ogg" type="video/ogg">
See, if it works now.
Check more about Google autoplay policy changes on:- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Related Topics
Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'
Provide an Image for Whatsapp Link Sharing
How to Remove Blue Highlight on Hover in Select, Option Inputs HTML for Chrome
How to Limit the Visible Options in an HTML <Select> Dropdown
How to Disable a Checkbox Based on Conditions in Angular 6
How to Set Filename for Base64 Rendered Pdf Using Object Tag
Setting Attribute Disabled on a Span Element Does Not Prevent Click Events
Playing M3U8 Files With HTML Video Tag
How to Disable Auto-Play for Local Video in Iframe
Html Text Input Field With Currency Symbol
Browsers Try to Download HTML File Instead of Opening
How to Dynamically Add HTML Element/Content - Angular
How to Avoid Decimal Values in Input Type Number
How to Load Image (And Other Assets) in Angular an Project
How to Click a Button on a Website Using Puppeteer Without Any Class, Id ,... Assigned to It
How to Make Div 100% Height of Browser Without Vertical Scrolling of Header