自动播放静音视频背景角5

Question

我想在我的网站主页的顶部添加自动播放静音视频，我正在使用angular 5。

有谁能帮帮忙吗？

提前谢谢你！

Answer 1

您可以将此代码直接写入component.ts文件

window.onload = function () {
var element = document.getElementById('video');
element.muted = "muted";}

这是我的html代码..

<video  id="video"><source src="assets/images/intro.mp4" type="video/mp4">
</video>

Answer 2

您也可以只在HTML中执行此操作。下面是我的工作示例：

<video [muted]="'muted'" autoplay="autoplay" loop="loop" playsinline id="video-start">
    <!-- Dynamic Content -->
    <source *ngIf="backgroundVideo?.Link?.Url" [src]="backgroundVideo.Link.Url" type="video/mp4">

    <!-- Default Content, displaying when dynamic content has a problem -->
    <source [src]="baseURL + '/SiteAssets/assets/videos/film_kpmg_home.mp4'" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

注意这一点，如果你只写muted="muted“而不写muted=”muted“，autoplay在angular项目中不能很好地工作。

而且，对于autoplay属性，你还需要在移动浏览器中使用'playsinline‘属性。这对桌面来说没有什么不同。