asp.net-core - 如何在 ASP .Net Core MVC Web 应用程序中设置视频背景

Question

目前，我正在开发一个 ASP .NetCore 项目来制作一个 Web 应用程序。我在为整个应用程序设置视频背景时遇到麻烦。有很多方法可以为普通 Html/CSS 项目设置视频背景，但我无法找到可靠的方法来为 ASP.net core MVC Web 应用程序设置视频背景。

项目详情:

1. 框架:ASP .NetCore MVC Web 应用程序
2. 目标框架:net 5.0

这是我的项目结构:The folder structure of the MVC web app

我急于找到一种方法来做到这一点。如果我提供的信息不充分，我深表歉意。是的，我尝试过使用简单的可用方法，例如，

• 在 _layout.cshtml 文件中使用视频标记，如下所示。

HTML 代码:

    <div class="fullscreen-bg">
      <video loop muted autoplay poster="images/background.jpg" class="fullscreen-bg__video">
                <source src="../../wwwroot/video/background.mp4" type="video/mp4">
      </video>
    </div>

CSS 代码:

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
        
.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

视频文件保存在wwwroot文件夹的images文件夹中。这是一个 mp4 文件。

我尝试了几个与上述代码类似的代码，但它在 ASP.NETcore Web 应用程序中不起作用。

Answer 1

我认为是路径问题，运行时wwwroot是web根路径。所以路径需要修改为:

<source src="~/video/background.mp4" type="video/mp4">

编辑:

浏览器可能与转码后的视频存在兼容性问题。您还可以使用videojs .

<div>
<video id="my-video" class="video-js" controls preload="auto" width="1296" height="728"
       poster="video/cover.png" data-setup="{}">

    <source src="~/images/1.mp4" type="video/mp4" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        supports HTML5 video
    </p>
</video>
</div>
@section Scripts{
  <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
  <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
  @*If you'd like to support IE8*@
  @*<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"> </script>*@
<script>
    var my_video = videojs('my-video');
    videojs('my-video').ready(function () {
        var myvideo = this;
        myvideo.play();
    });
</script>
}