在Angular 5 App中首次加载App时无法播放背景视频

时间:2018-06-25 14:20:43

标签: javascript jquery html html5 html5-video

我正在尝试将视频作为Angular 5应用的背景。但是,当第一次加载页面时,视频无法播放。但是如果我转到其他页面,然后再次返回首页,则视频正在播放。

到目前为止,我已经尝试了所有这些

1。

<video id="v-control" width="100%" autoplay="" loop="" tabindex="0">
   <source type="video/mp4" src="assets/img/MyVideo.mp4" alt=" MyVideo" />
   <source type="video/webm" src="assets/img/MyVideo.webm"  alt=" MyVideo" />
</video>

2。 Jquery plugin for background video

<div data-vide-bg="MyVideo">
  <video id="v-control" width="100%" autoplay="" loop="" tabindex="0">
    <source type="video/mp4" src="assets/img/MyVideo.mp4" alt=" MyVideo" />
    <source type="video/webm" src="assets/img/MyVideo.webm"  alt=" MyVideo" />
  </video>
</div>

并包含

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="src/jquery.vide.js"></script>

在index.html

我仍然面临着同样的问题。谁能帮忙,我在哪里做错了?

1 个答案:

答案 0 :(得分:0)

尝试按如下所示在onloadedmetadata="this.muted=true"标签内使用video,希望对您有所帮助:

<video onloadedmetadata="this.muted=true" autoplay loop  preload="auto">
    <source src="Video_url" type="video/mp4">
</video>