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

Question

I use this code in ASPX file:

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

but when I use this code in code behind:

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

and call my page as myPage.aspx?id=1 I get this error on <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

There are few things you could do here.

First is to get rid of <source> completely and use src attribute. You need to make video a server-side control, but that won't cause the error:

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

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

Another thing is to have a code behind function that will give you a video 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";
}

Here you can also use parameters and have several <source> tags to support fallback.

As to the error you are seeing, it is not obvious why would that be happening. HtmlSource is the right type of control for source tag, it is not clear why ASP.NET decides to treat it as generic html control instead. You can try this workaround though.

Answer 2

Not specifying the source attribute may lead to incompatibility issues on some browsers (eg: Safari. See https://github.com/mediaelement/mediaelement/issues/486 ).

Not a big deal, though. Source inner tags can be created from server side:

// 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);