Question

以下是我上传文件并显示上传文件的代码段： enter image description here 我想要的是播放视频而不是数据网格。我被困在这里如何做到这一点，因为我是asp.net和web服务的新手，请帮助我:)这是我的代码：

ASPX

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"    CodeBehind="Sample.aspx.cs" Inherits="WebApplication8.Sample" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        debugger;
        var DivElement = $('#MultipleFileUploader');
        var i = $('#MultipleFileUploader p').size() + 1;

        $('#AddAnotherUploader').on('click', function () {
            $('<p><input type="file" ID="FileUploader1' + i + '" name="FileUploader1' + i + '" class="form-control" /> </p>').appendTo(DivElement);
            i++;
            return false;
        });           
    });
</script>

<div class="form-horizontal">
    <h4>Uploading Multiple Files</h4>
    <hr />
    <asp:ValidationSummary runat="server" CssClass="text-danger" />
    <div class="form-group">
        <asp:Label runat="server" CssClass="col-md-2 control-label">Choose File</asp:Label>
        <div class="col-md-10" id="MultipleFileUploader">
            <p>
                <asp:FileUpload runat="server" ID="FileUploader" CssClass="form-control" />
                <a href="#" id="AddAnotherUploader">Add Files</a>
            </p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <asp:Button runat="server" ID="BtnUploadFile" OnClick="BtnUploadFile_Click" 
            Text="Upload Files" CssClass="btn btn-default" />
        </div>
    </div>
    <div class="form-group">
        <asp:Label runat="server" CssClass="col-md-2 control-label">Select Files:</asp:Label>
        <div class="col-md-10">
            <asp:GridView runat="server" ID="DataGridView" AutoGenerateColumns="false"  OnRowCommand="DataGridView_RowCommand" CssClass="form-control">
                <Columns>
                    <asp:BoundField HeaderText="File Name" DataField="Name" />
                    <asp:BoundField HeaderText="File Size" DataField="Size" />
                    <asp:TemplateField HeaderText="Get File">
                        <ItemTemplate>
                            <asp:LinkButton ID="LbnDownload" runat="server" CommandName="DownloadFile" 
                                CommandArgument='<%# Eval("Id") %>'>Download</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                 </asp:TemplateField>
                    <asp:TemplateField HeaderText="Video">
                        <ItemTemplate>
                              <video  width="300" height="200" autoplay controls>

                                  <Source src='<%# Eval("Name")%> .mp4' />

                           </video>
                            </ItemTemplate>
                        </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>



     </div>
</div>
 </asp:Content>

** Aspx.cs **

    namespace WebApplication8
      {
public partial class Sample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Form.Enctype = "multipart/form-data";
        if (!IsPostBack)
        {
            GetUploadedFiles();
        }
    }
    private void GetUploadedFiles()
    {
        using (Database1Entities SampleDb = new Database1Entities())
        {
            DataGridView.DataSource = SampleDb.UploadFiles.ToList();
            DataGridView.DataBind();

        }
    }

    protected void DataGridView_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "DownloadFile")
        {
            int File_ID = Convert.ToInt32(e.CommandArgument.ToString());
            using (Database1Entities SampleDb = new Database1Entities())
            {
                var File = SampleDb.UploadFiles.Where(f => f.Id.Equals(File_ID)).FirstOrDefault();
                if (File != null)
                {
                    Response.ContentType = File.ContentType;
                    Response.AddHeader("content-disposition", "attachment; filename=" + File.Name);
                    Response.BinaryWrite(File.Content);
                    Response.Flush();
                    Response.End();
                }
            }
        }
    }

    protected void BtnUploadFile_Click(object sender, EventArgs e)
    {
        HttpFileCollection File_Collection = Request.Files;
        using (Database1Entities SampleDb = new Database1Entities())
        {
            foreach (string File_Uploader in File_Collection)
            {
                HttpPostedFile Posted_File = File_Collection[File_Uploader];
                if (Posted_File.ContentLength > 0)
                {
                    BinaryReader Binary_Reader = new BinaryReader(Posted_File.InputStream);
                    byte[] File_Buffer = Binary_Reader.ReadBytes(Posted_File.ContentLength);
                    SampleDb.UploadFiles.Add(new UploadFile
                    {
                        Name = Posted_File.FileName,
                        ContentType = Posted_File.ContentType,
                        Extension = Path.GetExtension(Posted_File.FileName),
                        Size = Posted_File.ContentLength,
                        Content = File_Buffer
                    });
                }
            }
            SampleDb.SaveChanges();
        }
        GetUploadedFiles();
    }
           }
     }

提前多多感谢..

Answer 1

我可以看到您的视频文件的扩展名为.avi，.wmv。如果您希望它们可以在浏览器中播放，则需要遵循HTML5标准。它说在浏览器中使用HTML5视频的最佳方法是至少拥有.mp4，.ogg个文件。 MP4在chrome，IE，safari中播放，OGG用于mozilla浏览器。

假设：您可以做足够的处理，将它们转换为至少两种格式（MP4，OGG）或添加一些验证以接受至少MP4文件。

现在，这部分将使视频文件可播放。将asp:boundfield(*)更改为模板文件。在ItemTemplate中使用以下内容使其可播放。

<video  width="600" height="400">
  <source src='<%# Eval("filename") %>.mp4' />
  <source src='<%# Eval("filename") %>.ogg' />
</video>

(*)

<asp:GridView runat="server" ID="DataGridView" AutoGenerateColumns="false"  OnRowCommand="DataGridView_RowCommand" CssClass="form-control">
                <Columns>
                    <asp:BoundField HeaderText="File Name" DataField="Name" />..........

此处文件名应指向实际的MP4文件。

说完所有这些后，您可以使用带有视频源的.avi和.wmv文件进行测试，检查是否有效！

Answer 2

我想， this link finds useful for you click here 您可以下载演示项目，复制其js，css和html标签并根据您的需要进行修改。

检索数据库和播放视频c＃

2 个答案: