Angular 2+组件内的Chrome（Android）视频自动播放 [英] Chrome (Android) video autoplay inside Angular 2+ component

问题描述

如果我将带有autoplay的视频标签（见下文）放入Angular的模板中2+组件，目标是在移动设备上自动播放：

If I put a video tag with "autoplay" (see below) into the template of an Angular 2+ component with the goal of autoplaying on mobile:

<video muted autoplay>
    <source src="path/to/video.mp4" type="video/mp4" />
</video>

做什么工作：

• 将其移至index.html（Angular组件之外）



• 将其从组件中追加到正文中：

  What does work:

  • Moving it to the index.html (outside of the Angular component)

  • Appending it to the body from within the component:

    window.addEventListener('load', () => {
        document.body.innerHTML += "<video autoplay muted loop>\n" +
                                   "    <source src=\"path/to/video.mp4\" type=\"video/mp4\" />\n" +
                                   "</video>";
    });
    

  
  
  • 在组件模板中包含视频，启用用户控件，然后手动触摸播放按钮在视频上（即没有自动播放）
  
  

  我不喜欢我认为这是视频无效路径的问题，因为我可以手动点击播放按钮。

  I don't think it's an issue of an invalid path to the video, since I'm able to manually click the "play" button.

  根据此处和此处，如果（1）视频静音，并且（2）视频可见，则应允许在移动设备上自动播放。我已经读过在这种情况下可见或多或少被定义为附加到DOM而不是显示：无至少在几个地方。

  According to here and here, autoplay on mobile should be allowed if (1) the video is muted, and (2) the video is "visible". I've read that "visible" in this context is more or less defined to mean "attached to DOM" and not "display: none" in at least a couple of places.

  我最好的理论是，Angular 2+将某个组件粘贴在某种Shadow DOM（或类似的）中，这导致移动Chrome不会认为它是可见的。我尝试将组件设置为封装：ViewEncapsulation.None 以查看是否有所不同，但结果相同。

  My best theory is that Angular 2+ is sticking the component in some kind of "Shadow DOM" (or similar) that's resulting in mobile Chrome not thinking that it's visible. I tried setting the component to encapsulation: ViewEncapsulation.None to see if that made a difference, but same result.

  此外，如果我尝试针对已加载或canplaythrough事件设置事件侦听器并手动调用 videoElement.play（），那么我得到： DOMException：play（）只能由用户手势启动。如果我在devtools控制台中进行相同的函数调用（通过USB绑定到移动设备），那么它 播放。

  Additionally, if I try to set an event listener against the "loaded" or "canplaythrough" events and manually call videoElement.play(), then I get: DOMException: play() can only be initiated by a user gesture. If I make the same function call in the devtools console (tethering to mobile device via USB), then it does play.

  似乎Angular很可能正在阻碍我。是否有任何已知的Angular设置或解决方法我可以利用Android Chrome上的Angular 2+组件中的视频进行自动播放？感谢您的帮助。

  It seems that Angular is likely what's getting in my way. Is there any known Angular setting or workaround I can leverage to get a video to autoplay within an Angular 2+ component on Android Chrome? Thanks for any help.

  （ps：关于移动Chrome上自动播放视频的SO和其他地方有100万个问题，但它们似乎都没有解决这个问题它在Angular组件或类似内容中）

  (p.s.: there's like a million questions on S.O. and elsewhere about autoplaying video on mobile Chrome, but none of them seem to address the issue of doing it within an Angular component or similar)

  推荐答案

  回答和解决OP并在我自己的评论中提问：是的，将视频标记作为vanilla HTML附加到已初始化的Angular组件按预期工作（至少在Chrome& FF中确认）。刚刚碰巧需要这个为我自己的项目今天。 ：）

  Answer and work-around to OP and to question in my own comment: Yes, appending a video tag as vanilla HTML to an already initialized Angular component works as expected (confirmed at least in Chrome & FF). Just happened to need this for my own project today. :)

  所以你可以做这样的事情，或者管道返回给定视频URL的HTML（这是更好的表现，谷歌Angular Pipes ）。

  So you can do something like this, or a pipe that returns the HTML for a given video URL (which is much better perf-wise, google "Angular Pipes").

  <div *ngFor="let file of files" [innerHTML]="getVideoTag(file)"></div>
  
  // component
    getVideoTag(file) {
      return this.domSanitizer.bypassSecurityTrustHtml(
        `<video width="1280" height="720" autoplay muted controls>
            <source src="${file.url}" type="video/mp4">No HTML5 supported.</source>
         </video>`
      );
    }
  

  这篇关于Angular 2+组件内的Chrome（Android）视频自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！