Question

在iOS上，一切运行正常，因此我将重点放在Android上。如果我尝试在Chrome或Samsung Internet中打开页面，则视频会自动播放，效果很好。现在，如果我尝试从Instagram（促销和其他内容）或使用移动DuckDuckGo浏览器打开页面，则会出现一个中间带有三角形的黑框（应该在其中播放视频），即使单击该框也不会播放。我有什么想念的吗？再一次，这仅在Android上发生。谢谢！

<div #video class="banner-video div-wrapper">
  <video autoplay onloadedmetadata="this.muted = true" loop 
  playsinline>
    <source [src]="mediaHost + '/bannervideo.mp4'" type="video/mp4">
  </video>
</div>

Answer 1

因此，事实证明，Android上的Instagram使用内置浏览器的简化版本。这是最终使它在我测试过的每个设备中运行的代码：

<div #video class="banner-video div-wrapper">
  <video loop muted autoplay playsinline oncanplay="this.play()" onloadedmetadata="this.muted = true" [poster]="mediaHost + '/package.png'">
    <source [src]="mediaHost + '/bannervideo.mp4'" type="video/mp4">
    <p>Your Browser Does Not Support This Autoplay Video Feature</p>
  </video>
</div>

从Instagram打开的网页无法在Android上播放html5视频

1 个答案: