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在下拉列表的更改事件中将文件名注入视频播放器

创建一个webmethod，它将在下拉列表的change事件中传递文件名。将webmethod调用为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 webform中的下拉列表中选择视频来加载视频？

2 个答案: