草庐IT

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

coder 2023-12-25 原文

什么不有效:

如果我将带有“自动播放”(见下文)的视频标签放入 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 认为它不可见。我尝试将组件设置为 encapsulation: ViewEncapsulation.None 以查看是否有所不同，但结果相同。

此外，如果我尝试针对“loaded”或“canplaythrough”事件设置事件监听器并手动调用 videoElement.play()，那么我会得到:DOMException: play( ) 只能由用户手势启动。如果我在 devtools 控制台中调用相同的函数(通过 USB 连接到移动设备)，那么它会播放。

最后的想法:

看来 Angular 很可能是我的障碍。是否有任何已知的 Angular 设置或变通方法可以让我在 Android Chrome 上的 Angular 2+ 组件中自动播放视频？感谢您的帮助。

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

最佳答案

我一直在搜索这个问题，我把 muted 属性放在这样:

[muted]="true" 而不仅仅是 muted

现在可以了

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

Chrome 有一个策略，如果用户没有首先与页面交互，则不允许视频自动播放，但是如果它的静音视频 chrome 允许它。这里的问题是，由于某种原因，当您将 muted 放入 angular 时，muted 值变为 false。

关于android - Angular 2+组件内的Chrome(Android)视频自动播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48856562/

androidAngularcodevideosectiongoogle-chromehtml5-video

有关android - Angular 2+组件内的Chrome(Android)视频自动播放的更多相关文章

  1. ruby-on-rails - 如何优雅地重启 thin + nginx？ - 2

    我的瘦服务器配置了nginx，我的ROR应用程序正在它们上运行。在我发布代码更新时运行thinrestart会给我的应用程序带来一些停机时间。我试图弄清楚如何优雅地重启正在运行的Thin实例，但找不到好的解决方案。有没有人能做到这一点？ 最佳答案 #Restartjustthethinserverdescribedbythatconfigsudothin-C/etc/thin/mysite.ymlrestartNginx将继续运行并代理请求。如果您将Nginx设置为使用多个上游服务器，例如server{listen80;server

  2. ruby - 使用 `+=` 和 `send` 方法 - 2

    如何将send与+=一起使用？a=20;a.send"+=",10undefinedmethod`+='for20:Fixnuma=20;a+=10=>30 最佳答案 恐怕你不能。+=不是方法，而是语法糖。参见http://www.ruby-doc.org/docs/ProgrammingRuby/html/tut_expressions.html它说Incommonwithmanyotherlanguages,Rubyhasasyntacticshortcut:a=a+2maybewrittenasa+=2.你能做的最好的事情是:

  3. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  4. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  5. ruby - 如何计算 Liquid 中的变量 +1 - 2

    我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止，这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量，我

  6. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  7. arrays - Ruby 数组 += vs 推送 - 2

    我有一个数组数组，想将元素附加到子数组。+=做我想做的，但我想了解为什么push不做。我期望的行为(并与+=一起工作):b=Array.new(3,[])b[0]+=["apple"]b[1]+=["orange"]b[2]+=["frog"]b=>[["苹果"],["橙子"],["Frog"]]通过推送，我将推送的元素附加到每个子数组(为什么？):a=Array.new(3,[])a[0].push("apple")a[1].push("orange")a[2].push("frog")a=>[[“苹果”、“橙子”、“Frog”]、[“苹果”、“橙子”、“Frog”]、[“苹果”、“

  8. ruby - 如何在ruby中提取方括号内的内容 - 2

    我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和

  9. += 的 Ruby 方法 - 2

    有没有办法让Ruby能够做这样的事情？classPlane@moved=0@x=0defx+=(v)#thisiserror@x+=v@moved+=1enddefto_s"moved#{@moved}times,currentxis#{@x}"endendplane=Plane.newplane.x+=5plane.x+=10putsplane.to_s#moved2times,currentxis15 最佳答案 您不能在Ruby中覆盖复合赋值运算符。任务在内部处理。您应该覆盖+，而不是+=。plane.a+=b与plane.a=

  10. ruby - Sinatra + Heroku + Datamapper 使用 dm-sqlite-adapter 部署问题 - 2

    出于某种原因，heroku尝试要求dm-sqlite-adapter，即使它应该在这里使用Postgres。请注意，这发生在我打开任何URL时-而不是在gitpush本身期间。我构建了一个默认的Facebook应用程序。gem文件:source:gemcuttergem"foreman"gem"sinatra"gem"mogli"gem"json"gem"httparty"gem"thin"gem"data_mapper"gem"heroku"group:productiondogem"pg"gem"dm-postgres-adapter"endgroup:development,:t

随机推荐