HTML5视频在使用Angular的Chrome 67中不会自动播放（即使在静音时） [英] HTML5 video doesn't autoplay (even while muted) in Chrome 67 using Angular

问题描述

我知道有几个帖子有类似的问题，但我所看到的都没有遇到我遇到的具体问题。

I know several posts have similar issues, but none of the ones I have looked at have the specific issue I'm experiencing.

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

The problem is, I have a HTML5 video which won't autoplay, even though it is muted. Specifically, it doesn't work in Chrome. It works completely fine in Safari and 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>

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

The code snippet is from this website and it is built with Angular. I've removed attributes that are only related to Angular in the copied snippet for clarity.

我已经尝试了几种在线建议的各种组合的组合，以及仔细阅读影响自动播放功能的较新版本Chrome的文档。但是，我感到很茫然，似乎没什么用。

I have tried several combinations of what is suggested various places online, as well as carefully reading the documentation for the newer versions of Chrome that affect the autoplay feature. I am, however, at a loss, with nothing seeming to work.

据说，政策变化只会影响带有音频的视频的自动播放，但它似乎仍然会阻止这个静音视频的自动播放。

Supposedly, the policy change should only affect autoplay for videos with audio, but it still seems to block autoplay for this muted video.

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

One weird behavior that I have noticed is, that sometimes the video will start playing if I open the chrome inspector tool and close it again. Not always, though.

我也尝试直接通过JavaScript触发 play（），但这当然赢了由于用户没有通过点击启动它，所以无法正常工作。

I also tried triggering the play() directly through JavaScript, but this of course won't work since the user didn't initiate it through a click.

这可能是Chrome的错误还是我的结果？任何帮助表示赞赏！

Could this be a bug with Chrome or is it on my end? Any help is appreciated!

编辑：仍然无效。我尝试过以下操作，但没有结果：

• 使用 http：// techslides。 com / demos / sample-videos / small.mp4 视频源代替。


• 添加 autoplay 属性。


• 用建议的< video> 元素。 net / gababa / 2cz6f53k /rel =nofollow noreferrer> jsfiddle 。

• Using the http://techslides.com/demos/sample-videos/small.mp4 video as source instead.
• Adding autoplay attribute.
• Replacing the whole <video> element with the one from the suggested jsfiddle.

当我启用控件，音频按钮显示为灰色的声音开启版本，可能是由于我的视频没有录音带。但是，在使用演示视频时，尽管设置了静音属性，它仍会显示声音开启的音频按钮。

When I enable controls, the audio button shows as grayed out "sound on" version, might be due to my video having no audiotrack. However, when using the demo video, it still shows the audio button with "sound on" in spite of the muted attribute being set.

编辑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;
  }

}

TypeScript：

TypeScript:

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() {}
}

推荐答案

感谢bigless'链接这个SO帖子我解决了这个问题。

Thanks to bigless' linking this SO post I solved the problem.

我从链接中实现的解决方案如下所示：

MY implementation of the solution from the link looks like this:

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>`
    );
  }
}

注意：我不得不移动课程 landing-page-video 进入全球 styles.css file，因为angular不附加组件特定的前缀（即，如果它放在特定于组件的css文件中，它将不会应用样式）

这篇关于HTML5视频在使用Angular的Chrome 67中不会自动播放（即使在静音时）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！