有人能解释为什么这个自动播放视频不能在chrome中工作吗?
该视频存储在防火区存储器中。当您访问某个页面,然后返回主页时,它会播放,但在刷新时第一次进入页面时不会播放。它也是一个角度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>
<video loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
<source src="video.mp4" type="video/mp4">
</video>
使用CCD_ 1&oncanplay=";this.play(("lt;是将其加载到Angular 6项目上的javascript解决方案。
对于纯Angular解决方案,我们需要使用Angular事件和模板变量:
<video #video
(canplay)="video.play()"
(loadedmetadata)="video.muted = true"
...// as before
</video>
您可以像"纯角度"解决方案一样全局覆盖video[autoplay]标签
@Directive({
selector: 'video[autoplay]',
host: {
'autoplay': '',
'oncanplay': 'this.play()',
'onloadedmetadata': 'this.muted = true'
}
})
export class VideoAutoplayDirective {}
我花了几个小时研究这个问题并找到了解决方案:
<video [autoplay]="ture" [muted]="true" [loop]="true" src="{{src}}"></video>
在我的情况下,以下内容就足够了,可以像GIF一样自动播放Angular 10视频:
<video
src="...mp4"
type="video/mp4"
playsinline
loop
autoplay
[muted]="true"
></video>
此外,请不要忘记检查chrome:的自动播放策略
https://developer.chrome.com/blog/autoplay/
<视频src=";。。。mp4";type=";视频/mp4";playsinline循环自动播放[静音]=";真";