如何通过从 asp.net 网络表单的下拉列表中选择来加载视频？

Question

我有一个下拉列表，其中包含不带文件扩展名的视频名称列表。我还有一个嵌入式 HTML5 视频播放器。目前，视频播放器使用上传文件夹中的视频进行硬编码。我想将下拉列表中的视频名称传递给视频播放器，以便它加载选定的视频。每个视频都支持三种格式（mp4、ogv 和 webm）。我只想将不带文件扩展名的视频名称传递给 3 种视频格式中的每一种。加载的视频将取决于用户浏览器支持的内容，首先尝试 Mp4，然后是 ogv，最后是 webm。如果用户浏览器不支持主要的 3 种格式，我还有一个脚本将加载 .flv 视频。

提前感谢您提供的任何帮助。

这是我的下拉列表和视频播放器代码：

<div>
  <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
  <asp:LinqDataSource ID="LinqDataSource1" runat="server" EntityTypeName="">
  </asp:LinqDataSource>
</div>
<div id='media-player'>
  <video id='media-video' controls>
    <source src="Uploads/Changing Master Key.Mp4" type='video/Mp4'>
    <source src="Uploads/Changing Master Key.webm" type='video/webm'>
    <source src="Uploads/Changing Master Key.ogv" type='video/ogv'>
  </video>
</div>

这是下拉列表背后的代码：

  protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
    {
      string[] filePaths = Directory.GetFiles(Server.MapPath("~/Uploads/"));

      Dictionary<string, string> filenames = new Dictionary<string, string>();

      foreach (string filePath in filePaths)
      {
        var file_name_without_extension = Path.GetFileNameWithoutExtension(filePath);

        if (filenames.ContainsKey(file_name_without_extension))
          continue;

        filenames.Add(file_name_without_extension, filePath);
      }

      List<ListItem> files = filenames.Select(x => new ListItem(x.Key, x.Value)).ToList();

      DropDownList1.DataSource = files;
      DropDownList1.DataTextField = "";
      DropDownList1.DataValueField = "";
      DropDownList1.DataBind();
    }
  }

我已经根据下面的 Khazratbek 建议更新了我的代码。

  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
  {
    string YourFilePathWithFileName = DropDownList1.SelectedValue;
    media_video.Attributes.Add("src", "/Uploads/" + YourFilePathWithFileName + ".mp4");
    media_video.Attributes.Add("type", "video/mp4");
    media_video.Attributes.Add("autoplay", "autoplay");
    media_video.Attributes.Add("src", "/Uploads/" + YourFilePathWithFileName + ".ogv");
    media_video.Attributes.Add("type", "video/ogv");
    media_video.Attributes.Add("autoplay", "autoplay");
    media_video.Attributes.Add("src", "/Uploads/" + YourFilePathWithFileName + ".webm");
    media_video.Attributes.Add("type", "video/webm");
    media_video.Attributes.Add("autoplay", "autoplay");
  }

Answer 1

您可以使用 jquery 在下拉列表的更改事件中将文件名插入视频播放器

创建一个 web 方法，它将在下拉列表的更改事件中传递文件名。将 web 方法作为 jquery ajax 调用并获取文件名并将其注入视频播放器控件

Answer 2

我可能会采用一种方法。

<div>
  <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>
  <asp:LinqDataSource ID="LinqDataSource1" runat="server" EntityTypeName="">
  </asp:LinqDataSource>
</div>
<div id="media-player">
  <video id="media_video" runat="server" controls>
  </video>
</div>

以及您的 SelectedIndexChanged 方法：

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    media_video.Attributes.Add("src", YourFilePathWithFileName);
    media_video.Attributes.Add("type", "video/mp4");
    media_video.Attributes.Add("autoplay", "autoplay");
}

希望对您有所帮助

如何通过从 asp.net 网络表单的下拉列表中选择来加载视频？

How to load a video by selecting it from a dropdown list in a asp.net webform?

c#

asp.net

webforms