HTML5 使用 Angular 在 Chrome 67 中视频不会自动播放（即使静音）

Question

我知道有几篇帖子有类似的问题，但我看过的帖子中 none 有我遇到的具体问题。

问题是，我有一个 HTML5 视频无法自动播放，即使它已静音。具体来说，它在 Chrome 中不起作用。它在 Safari 和 Firefox 中完全正常工作。

代码片段如下所示：

<video class="landing-page-video" poster="assets/images/video-poster.jpg" loop muted playsinline preload="metadata" disableRemotePlayback>
    <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
    Your browser does not support video.
</video>

代码片段来自 website，它是用 Angular 构建的。为了清楚起见，我在复制的代码段中删除了仅与 Angular 相关的属性。

我已经尝试了网上各个地方建议的几种组合，并仔细阅读了影响自动播放功能的新版本 Chrome 的文档。然而，我很茫然，似乎没有任何效果。

据推测，政策更改应该只会影响带音频的视频的自动播放，但它似乎仍然阻止了这个静音视频的自动播放。

我注意到的一个奇怪行为是，如果我打开 chrome 检查器工具并再次关闭它，有时视频会开始播放。不过，并非总是如此。

我也试过直接通过 JavaScript 触发 play()，但这当然行不通，因为用户没有通过点击启动它。

这可能是 Chrome 的错误还是我这边的错误？感谢您的帮助！

编辑：仍然无法正常工作。我尝试了以下方法，但没有结果：

改为使用 http://techslides.com/demos/sample-videos/small.mp4 视频作为来源。
正在添加 autoplay 属性。
用建议的 jsfiddle 中的元素替换整个 <video> 元素。

当我启用 controls 时，音频按钮显示为灰色 "sound on" 版本，可能是因为我的视频没有音轨。然而，当使用演示视频时，尽管设置了 muted 属性，它仍然显示带有 "sound on" 的音频按钮。

编辑 2：为包含视频元素的 Angular 组件添加了代码：

HTML:

<video class="landing-page-video noselect"  poster="assets/images/video-poster.jpg" *showItSizes="{min:900}" muted loop autoplay disableRemotePlayback>
    <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
    Your browser does not support video.
</video>

<div class="landing-page-video-overlay noselect" *showItSizes="{min:900}" [ngStyle]="{'height': videoHeight + 'px'}">
    <st-svg-logo class="video-overlay-logo"></st-svg-logo>
</div>
<div class="noselect" *showItSizes="{max:899}" style="position: relative; top: 0; height: 100vh;">
    <img src="assets/images/landing_pic_mobile_3.jpg" alt="Student Talks in Space" class="landing-page-video"
         style="height: 100vh;">
    <img class="video-overlay-logo" src="assets/images/student-talks-header.png"/>
    <img src="assets/images/landing_pic_mobile_bottom.png" class="bottom-transition-glitch" alt="">
</div>


<div class="st-container">
    <st-events-list class="full-width event-list" *showItSizes="{max:899}"></st-events-list>
    <h1>HOW IT WORKS</h1>
    <st-what-is class="st-row"></st-what-is>
    <st-world-map class="full-width" *showItSizes="{min:899}"></st-world-map>
    <st-counters #counters class="full-width" stInView (cameInView)="counters.countUp()"></st-counters>
    <st-events-list class="full-width" *showItSizes="{min:900}"></st-events-list>
    <br><br>
    <st-video class="st-row"></st-video>
    <br><br>
    <st-partners></st-partners>
    <br><br>
</div>

CSS:

.landing-page-video, .landing-page-video-overlay {
  position: relative;
  width: 100vw;
  max-width:100%;
  top: 0;
  z-index: -100;
}

.landing-page-video-overlay {
  height: 56.25vw;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

@media screen and (max-width: 899px) {
  .video-overlay-logo {
    position: absolute;
    top: 50vh;
    right: 21%;
    width: 100vw;
    animation: fade-in 1s;
    z-index: 160;
  }

}

打字稿：

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'st-home',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

Answer 1

这在 chrome 67（和 firefox 61）中对我有用。

<video width="320" height="240" muted controls autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

实例：jsfiddle

希望对您有所帮助。

Answer 2

您必须在 <video> 标签中使用 autoplay 属性。

<video autoplay></video>

Answer 3

感谢 bigless' linking 我解决了这个问题。

我对 link 的解决方案的实施如下所示：

HTML

<div class="video-chrome-fix" [innerHTML]="videoTag"></div>

TypeScript

import {Component} from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";

@Component({
  selector: 'st-home',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent {

  videoTag;

  constructor(private sanitizer: DomSanitizer) {
    this.videoTag = this.getVideoTag();
  }

  private getVideoTag() {
    return this.sanitizer.bypassSecurityTrustHtml(
        `<video class="landing-page-video noselect" muted loop autoplay playsinline disableRemotePlayback>
            <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>`
    );
  }
}

注意：我必须将 class landing-page-video 移动到全局 styles.css 文件，因为 angular 不附加特定于组件的前缀（即，如果它被放置在特定于组件的 css 文件中，它不会应用样式）

Answer 4

解决Angular 2+种需要自动重放无声且不工作的情况

自动播放被阻止，直到用户在屏幕上执行操作。 Chrome 的自动播放政策将在 2018 年 4 月更改。 [https://developers.google.com/web/updates/2017/09/autoplay-policy-changes]
选择 "mute" 属性时自动播放有效。
对于这种情况，我们想使用属性 "mute" 但它不起作用，问题是 Angular。

The same thing happened to me and after hours of searching. And I found the following. - [

onloadedmetadata="this.muted = true"

This is the key. Angular can not translate the attibute "mute" correctly. For this reason you have to use the "onloadedmetadata".

结论

在 Chrome 69 和 IE 11 中测试运行 angular 5.2。

<video onloadedmetadata="this.muted=true" autoplay>
    <source src="myVideo.mp4" type="video/mp4" />
</video>

Answer 5

使用 Angular 6.
我想要静音自动播放。前一个的 None 对我有用，这个对我有用：

oncanplay="this.play()"

希望对大家有所帮助。

Answer 6

我需要同时使用 onloadedmetadata 和 oncanplay 来修复 angular 6

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

Answer 7

我对 angular 6 和 Chrome 70 也有同样的问题，new autoplay policy 在过去几个月里改变了 google，我解决了添加一个问题ngAfterViewInit()

中的新方法

<!-- home.component.html -->
<div class="fullscreen-bg">
  <video #homeVideo id="homeVideo" class="fullscreen-bg__video" muted loop autoplay disableRemotePlayback onloadedmetadata="this.muted=true" *ngIf="true">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
  </video>
</div>

// home.component.ts
ngAfterViewInit(){
  let myVideo = document.getElementById('homeVideo') as HTMLFormElement;
  myVideo.muted = false;
  myVideo.loop = true;

  if (myVideo){
    setTimeout(() => {
      console.log("Play ?", myVideo.play() );
      myVideo.play();
    }, 3000);
  }
}

Answer 8

而不是使用 HTML 属性 autoplay & muted。您需要使用 Angular 属性 [autoplay]="true" & [muted]="true"

Answer 9

我不知道它是否有帮助，但有时静音属性不会完全静音视频。我经常遇到的是它仍然是音量 1 而不是 0，并且 100% 音量并不意味着它已静音。所以当我将音量设置为 0 时它起作用了。

https://www.w3schools.com/tags/av_prop_volume.asp

Answer 10

这是我的工作示例：

<video [muted]="'muted'" autoplay="autoplay" loop="loop" playsinline id="video-start">
    <!-- Dynamic Content -->
    <source *ngIf="backgroundVideo?.Link?.Url" [src]="backgroundVideo.Link.Url" type="video/mp4">

    <!-- Default Content, displaying when dynamic content has a problem -->
    <source [src]="baseURL + '/SiteAssets/assets/videos/film_kpmg_home.mp4'" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

请注意，如果您只写 muted="muted" 而不是 [muted]="'muted'"，自动播放将无法在 angular 项目中正常工作。

而且，对于自动播放属性，您还需要仅对移动浏览器使用 'playsinline' 属性。这对桌面没有影响。

HTML5 使用 Angular 在 Chrome 67 中视频不会自动播放（即使静音）

HTML5 video doesn't autoplay (even while muted) in Chrome 67 using Angular

html

javascript

google-chrome

cross-browser

html5-video