如何在代码后面设置视频标签的来源？

Question

我在 ASPX 文件中使用此代码：

 <video width="320" height="240" autoplay="autoplay">
    <source id="videoSrc" runat="server"  type="video/mp4"/>
    Your browser does not support the video tag.
 </video>

但是当我在后面的代码中使用这段代码时：

protected void Page_Load(object sender, EventArgs e)
{
    videoSrc.Src= "UploadMovies/"+Request.QueryString["id"]+"/high.mp4";
}

并将我的页面称为 myPage.aspx?id=1 我在 <source>:

上收到此错误

The base class includes the field 'videoSrc', but its type (System.Web.UI.HtmlControls.HtmlSource) is not compatible with the type of control (System.Web.UI.HtmlControls.HtmlGenericControl).

Answer 1

您在这里可以做的事情很少。

首先是完全摆脱 <source> 并使用 src 属性。您需要将 video 设为 server-side 控件，但这不会导致错误：

<video width="320" height="240" autoplay="autoplay" id="video" runat="server">
</video>

video.Attributes["src"] = "UploadMovies/"+Request.QueryString["id"]+"/high.mp4";

另一件事是有一个代码隐藏功能，可以给你一个视频link:

<video width="320" height="240" autoplay="autoplay">
    <source type="video/mp4" src='<%= GetVideoLink() %>'/>
</video>

protected string GetVideoLink()
{
    return "UploadMovies/"+Request.QueryString["id"]+"/high.mp4";
}

这里也可以使用参数，有几个<source>标签支持fallback。

至于您看到的错误，尚不清楚为什么会发生这种情况。 HtmlSource 是 source 标签的正确控件类型，不清楚为什么 ASP.NET 决定将其视为通用 html 控件。不过你可以试试this workaround。

Answer 2

不指定源属性可能会导致某些浏览器出现不兼容问题（例如：Safari。请参阅 https://github.com/mediaelement/mediaelement/issues/486）。

不过没什么大不了的。 Source 可以从服务器端创建内部标签：

// Assuming we have runat="server" video tag in the markup side, with ID=vid:
// We could cast it as HtmlGenericControl. e.g: in a ItemDataBound event of a Repeater

// Now create the source tag    
HtmlGenericControl source1 = new HtmlGenericControl("source");

source1.Attributes["src"] = "your_video_url";
source1.Attributes["type"] = "video/mp4";

// We can also add additional sources:
HtmlGenericControl source2 = new HtmlGenericControl("source");
source2.Attributes["src"] = "your_video_second_url";
source2.Attributes["type"] = "video/webm";

// Now add the sources as child controls of the video control
vid.Controls.Add(source1);
vid.Controls.Add(source2);

如何在代码后面设置视频标签的来源？

How to set source of video tag in code behind?

html

c#

asp.net

html5-video