ASP.NET MVC stream text to src tag

Question

I'm trying to figure out a good pattern to accomplish the following:

<video width="640" height="480" controls>
    <source src="@Model.MeetingVideo" type="video/mp4">
    <track kind="subtitles" label="English subtitles" src="@Model.Subtitles" srclang="en" default/>
</video>

I want to be able to store the src text in my ViewModel ( @Model.Subtitles ) and have it displayed.

It is just text content. Normally, these subtitle files are static text files.

For some reason, taking the approach above is not working.

I am not seeing the subtitles appear.

I think I'm doing something wrong ... think I need some sort of streaming technique to stream the text to the src attribute.

Any ideas or suggestions?

Thanks,

Philip

Answer 1

So src expects a URI. How about encoding the data as a data URI ?

public static string GetDataUri(string text, string contentType)
{
    var bytes = Encoding.UTF8.GetBytes(text);
    var b64String = Convert.ToBase64String(bytes);

    //the old way
    //var dataUri = string.Format("data:{0};base64,{1}", contentType, b64String);

    //C#6.0 and above
    var dataUri = $"data:{contentType};base64,{b64String}";

    return dataUri;
}

then generate the URI

//maybe subs have a different content type? I don't know
var subtitleSrc = GetDataUri(theText, "text/plain"); 

and get it into your model and use the value directly as the src for your track element.

If it were me, I'd use src = "@Html.Raw(theDataUri)" in your view so that razor doesn't try to meddle with the string before rendering it.