英文:
Angular 15: Video-source tag works with a hard-coded URL but doesn't work with property binding
问题
我正在尝试在Angular应用程序中构建一个视频播放器，使用硬编码值测试此代码时：
<video controls Autoplay="autoplay" autoplay="true">
<source src="urlFromDB.mov" type="video/mp4" />
</video>
这可以正常工作。
但当我通过属性传递完全相同的URL时，出现了某种原因而无法工作：
<video controls Autoplay="autoplay" autoplay="true">
<source [src]="property" type="video/mp4" />
</video>
在这两种情况下，Chrome开发工具中的HTML源显示相同的src URL。对于这个问题，无法找到专门的帮助，非常感激任何帮助。
英文:
I am trying to build a video player in an angular app, and while testing this code with hardcoded values:
<video controls Autoplay="autoplay" autoplay="true">
<source src="urlFromDB.mov" type="video/mp4" />
</video>
This works totally fine.
But when I pass the exact same URL through a property, it doesn't work for some reason.
<video controls Autoplay="autoplay" autoplay="true">
<source [src]="property" type="video/mp4" />
</video>
In both cases, the HTML source in chrome dev tools showed the same src URL. Wasn't able to find any help specifically for this, any help would be much appreciated.
答案1
得分: 2
我已解决这个问题：显然，浏览器在页面加载时对src属性的评估方式有点奇怪，所以最好的方法是使用Renderer2来动态创建<source>标签并将其附加到<video>标签（在ngOnInit函数中）。
为了其他遇到相同问题的人留下这个解决方案。
英文:
I've fixed this: Apparently, the browser has a weird way of evaluating the src attribute on page load, so the best way was to use Renderer2 to dynamically create the <source> tag and append it to <video> (in the ngOnInit function).
Leaving this open for somebody else with the same problem.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论