标签：android angular google-chrome html5-video

什么行不通：

如果我将带有“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中确认).恰好在今天我的项目中需要这个.

标签：android,angular,google-chrome,html5-video
来源： https://codeday.me/bug/20191001/1839268.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。