Angular 2组件内的Chrome(Android)视频自动播放

概述什么行不通：如果我将带有“autoplay”的视频标签(见下文)放入Angular2组件的模板中,目标是在移动设备上自动播放：<videomutedautoplay><sourcesrc="patho/video.mp4"type="video/mp4"/></video>什么工作：>将其移动到index.html(Angular组件之外)>从组件内部将其

什么行不通：

如果我将带有“autoplay”的视频标签(见下文)放入Angular 2组件的模板中,目标是在移动设备上自动播放：

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

什么工作：

>将其移动到index.HTML(Angular组件之外)
>从组件内部将其附加到正文：

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

>在组件模板中包含视频,启用“用户控件”,并手动触摸视频上的播放按钮(即无自动播放)

理论：

我不认为这是视频无效路径的问题,因为我可以手动点击“播放”按钮.

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

我最好的理论是Angular 2将组件粘贴在某种“Shadow DOM”(或类似的)中,这导致移动Chrome不认为它是可见的.我尝试将组件设置为封装：VIEwEncapsulation.None以查看是否有所不同,但结果相同.

另外,如果我尝试针对“已加载”或“canplaythrough”事件设置事件侦听器并手动调用vIDeoElement.play(),那么我得到：DOMException：play()只能由用户手势启动.如果我在devtools控制台中进行相同的函数调用(通过USB连接到移动设备),那么它确实会播放.

最后的想法：

似乎Angular很可能正在阻碍我.是否有任何已知的Angular设置或解决方法,我可以利用它来在AndroID Chrome上的Angular 2组件中自动播放视频？谢谢你的帮助.

(p.s：在S.O.和其他地方有关于移动Chrome上的自动播放视频的问题,有一百万个问题,但它们似乎都没有解决在Angular组件或类似组件中执行此 *** 作的问题)

解决方法:

回答并解决OP并在我自己的评论中提问：是的,将视频标签作为vanilla HTML附加到已初始化的Angular组件按预期工作(至少在Chrome和FF中确认).恰好在今天我的项目中需要这个. 总结

以上是内存溢出为你收集整理的Angular 2组件内的Chrome(Android)视频自动播放全部内容，希望文章能够帮你解决Angular 2组件内的Chrome(Android)视频自动播放所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。