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

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 视频

Web pages opened from Instagram won't play html5 video on Android

html

video

android

instagram

angular