【问题标题】:How to make html video autoplay on phones and tablets?如何在手机和平​​板电脑上制作 html 视频自动播放?
【发布时间】:2016-12-28 10:53:37
【问题描述】:

我的网站 olegefimkin.ru 上有一个背景视频,它应该会在页面加载时自动开始播放。它适用于 PC 和某些手机,但不适用于某些手机和平板电脑(例如 iPhone)。 我正在使用这个 html 代码:

<video autoplay loop muted id="main-video">
  <source src="/themes/basic/video/intro.webm" type="video/webm"></source>
  <source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>

我也尝试添加 javascript video.play() 但它仍然无法在 Safari 中使用。 如何在移动设备上自动播放视频?

【问题讨论】:

    标签: javascript html html5-video


    【解决方案1】:

    除非您满足以下要求,否则视频不会在 Safari IOS 中自动播放:

    <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 <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
    <video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
    <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.
    

    您需要从源中删除音频或将其静音并启用声音以通过手势激活。

    来自Webkit policies for video

    【讨论】:

    • 我很想知道这个答案是否有帮助。我已经满足了所有这些要求,但仍然无法正常工作。我在 Final Cut 中创建了视频,分离并删除了时间线中的音轨,仅将其导出为视频(1.3mb mp4),并在视频标签中指定了 playinline 自动播放静音。我什至无法让它在 iOS 10.2 上播放,除非我将视频直接放入浏览器的地址栏中。
    • 只是html代码,没有js甚至css。我会将其粘贴到下面的答案中。
    • opera mini in ios 默认支持自动播放,而 chrome、firefox 和 safari 不支持也不提供开启选项。
    【解决方案2】:
    <video poster="video-sg.jpg" playsinline autoplay muted loop>
      <source src="caffe.webm" type="video/webm">
      <source src="caffe.mp4"" type="video/mp4">
      Your Browser May Not Support This
    </video>
    

    在任何最近的桌面浏览器上,它都会自动播放和循环播放。但在移动 Safari 中,它不会自动播放,甚至根本不会播放。我什至无法按下播放按钮来启动它。只显示海报图片。

    抱歉,如果我劫持了 OP 的问题,但至少这是同一个问题!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-04-14
      • 1970-01-01
      • 2015-02-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-04
      • 1970-01-01
      相关资源
      最近更新 更多