typescript Angular HTML全屏视频自动播放不工作

46scxncf 于 2022-11-30 发布在 TypeScript

关注(0)|答案(6)|浏览(170)

有人能解释为什么这个自动播放视频在chrome中不起作用吗？
视频存储在firebase存储器中。当你访问一个页面然后回到主页时它会播放，但不是当你第一次进入刷新页面时。它也是一个棱角6的应用程序。

<video autoplay muted loop>
    <source type="video/mp4" src="https://firebasestorage.googleapis.com/v0/b/gortonluxury.appspot.com/o/videos%2Fhero-video.mp4?alt=media&token=1231bda8-4240-4c1d-a0b9-9c5b50b320d0">
  </video>

typescript

来源：https://stackoverflow.com/questions/53756695/angular-html-fullscreen-video-autoplay-not-working

6条答案

按热度按时间

vuv7lop31#

<video loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>

使用onloadedmetadata & `oncanplay=”this.play（）"〈是让它加载到Angular 6项目中的JavaScript解决方案。

赞(0）回复(0）举报 2022-11-30

rseugnpd2#

对于纯Angular 解决方案，我们需要使用Angular 事件和模板变量：

<video #video 
    (canplay)="video.play()"
    (loadedmetadata)="video.muted = true"
    ...// as before
</video>

赞(0）回复(0）举报 2022-11-30

wmtdaxz33#

您可以像“纯Angular ”解决方案一样全局覆盖video[autoplay]标记

@Directive({
    selector: 'video[autoplay]',
    host: {
        'autoplay': '',
        'oncanplay': 'this.play()',
        'onloadedmetadata': 'this.muted = true'
    }
})
export class VideoAutoplayDirective {}

赞(0）回复(0）举报 2022-11-30

aamkag614#

以下是足够的在我的情况下，有Angular 10自动播放视频像GIF：

<video
  src="...mp4"
  type="video/mp4"
  playsinline
  loop
  autoplay
  [muted]="true"
></video>

赞(0）回复(0）举报 2022-11-30

xqkwcwgp5#

另外，请不要忘记检查chrome的自动播放策略：
https://developer.chrome.com/blog/autoplay/

赞(0）回复(0）举报 2022-11-30

cetgtptt6#

我花了几个小时在这个问题上，并找到了解决办法：

<video [autoplay]="ture" [muted]="true" [loop]="true" src="{{src}}"></video>

赞(0）回复(0）举报 2022-11-30

我来回答

typescript Angular HTML全屏视频自动播放不工作

6条答案

相关问题

热门标签

最新问答