html5 autoplay video in Mobile device

by

You wont be able to achieve this in iOS without hacks. From the official Apple WebKit documentation:

Starting in iOS 10, WebKit relaxes its inline and autoplay policies to
make these presentations possible, but still keeps in mind sites’
bandwidth and users’ batteries.

By default, WebKit will have the following policies:

  • video elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
  • video muted elements will also be allowed to autoplay without a user gesture. If a element gains an audio track or becomes un-muted without a user gesture, playback will pause.

https://webkit.org/blog/6784/new-video-policies-for-ios/

As for Mobile Chrome (Android):

Muted autoplay for video is supported by Chrome for Android as of
version 53. Playback will start automatically for a video element once
it comes into view if both autoplay and muted are set, and playback of
muted videos can be initiated progamatically with play(). Previously,
playback on mobile had to be initiated by a user gesture, regardless
of the muted state.

https://developers.google.com/web/updates/2016/07/autoplay

More Related Contents:

  1. Set cellpadding and cellspacing in CSS?
  2. Left column and stacked right column using flexbox CSS [duplicate]
  3. Unicode characters in URLs
  4. Why does the outer here not completely surround the inner ?
  5. Do I encode ampersands in ?
  6. What does appending “?v=1” to CSS and JavaScript URLs in link and script tags do?
  7. embedding image in html email
  8. background: fixed no repeat not working on mobile
  9. How to make a display in a horizontal row
  10. Setting the character encoding in form submit for Internet Explorer
  11. Creating a Zoom Effect on an image on hover using CSS?
  12. Network-Path Reference URI / Scheme relative URLs
  13. avoid page break inside row of table
  14. Why does my “oninvalid” attribute let the pattern fail?
  15. HTML5 live streaming
  16. White space inside XML/HTML tags
  17. Including external HTML file to another HTML file [duplicate]
  18. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  19. What is the difference between onBlur and onChange attribute in HTML?
  20. Same height column bootstrap 3 row responsive
  21. Flexbox with fixed header and footer and scrollable content
  22. Insert HTML code inside SVG Text element
  23. Prevent a centered layout from shifting its position when scrollbar appears
  24. Change css font-family for separate options in select tag
  25. Setting max-height for table cell contents
  26. How much faster is it to use inline/base64 images for a web site than just linking to the hard file?
  27. Pseudo element not full container width when border used
  28. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  29. How to play CSS3 transitions in a loop?
  30. HTML canvas with scrollbar

Leave a Comment