发表新帖
发表新帖

html5 autoplay video in Mobile device

前端 未结
关注
8 608
南方客
南方客 2020-12-06 00:45

Auto play is not working without muted attribute, when I try to open url in mobile device. How to play video without using muted attribute

相关标签:
8条回答
  • 耶瑟儿～
    2020-12-06 01:26

    Simply include defaultMuted inline with your video to enable sound on autoplay. For example,

     <video id="myVideo" defaultMuted autoplay controls>
     <source src="myVideo.mp4" type="video/mp4">
 </video>

    Reference: http://www.w3schools.com/tags/av_prop_defaultmuted.asp

    0 讨论(0)
  • 情话喂你
    2020-12-06 01:35

    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

    0 讨论(0)
  • 天涯浪人
    2020-12-06 01:35

    On Ios make sure you don't have energy-saving on. This makes it so the video won't play.

    0 讨论(0)
  • 野的像风
    2020-12-06 01:35

    May be this will work for you

    <video  autoplay="autoplay" loop="loop" muted defaultMuted playsinline>
    0 讨论(0)
  • 花落未央
    2020-12-06 01:37

    Its simple see the code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Example movie autoplay</title>
    <meta charset="UTF-8">                
</head>
<body>
    <video autoplay muted>
        <source src="midia/video.mp4" type="video/mp4">
        <source src="midia/video.webm" type="video/webm">
    </video>
</body>
</html>

    You need check the browsers and the formats supported.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Browser_compatibility

    https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-06 01:42

    I can't really make any sense of it but this managed to work on iOS Safari and Firefox (haven't tested Android):

    <video playsinline autoplay muted loop id="DemoReel2018">
<source src="resources/AgsVision_backgroundMovie.mp4" type="video/mp4">
</video>

    ...thing is, it only work after I set the viewport:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    If anyone can actually explain why that happened, I'd really want to know. Otherwise...stay tuned for more wacky stuff :))

    0 讨论(0)
 看不清?
提交回复
热议问题