How to embed this C# code into HTML?

Question

I have a simple question, and I hope any one of you could help me out. My question is as follows:

I have defined some properties to run some videos in an HTML5 player [named Flowplayer], and the properties that am using are:

public string VideoSource; //it values are the source path of the video files
public string videoformat; //it values are e.g. video/webm and video/mp4
public int width; // The width of the player 
public int height; // The height of the player

a) Now here is the code which I really need your help in:

string.Format("<div style=\"width:{0}px;height:{1}px\" id='video1' class='flowplayer' data-swf='flowplayer.swf' data-ratio='0.4167'><video><source type='videoformat:{0}' src='VideoSource:{0}'/></video></div>", videoformat, width, height);

Well, the above code doesn't work. I am pretty sure that the aforementioned text in the code is wrong (Especially everything inside the <video>...</video>) and needs to be fixed. So, Could you please help me in it ?

b) Here is another way I used to use:

string.Format("<div style=\"width:{0}px;height:{1}px\" id='video1' class='flowplayer' data-swf='flowplayer.swf' data-ratio='0.4167'><video><source type='video/webm' src='http://myepiserversite/Global/WebmFileSample.webm' /></video></div>", videoformat, width, height);

This second code way works fine, But this is quite impractical because it ONLY works with 1 single video format (video/webm) and 1 single video file (Hardcoded). I really want it to be more flexible and be able to take the values of both videoformat and videosource from the variables.

So, My goal is to resolve point (a) and embed the C# code properly into the HTML tags.

Thanks a lot !

Answer 1

Here's your original snippet 1:

string.Format("<div style=\"width:{0}px;height:{1}px\" id='video1' class='flowplayer' data-swf='flowplayer.swf' data-ratio='0.4167'><video><source type='videoformat:{0}' src='VideoSource:{0}'/></video></div>", videoformat, width, height);

Here is your snippet 1 reformatted to make it readable:

string.Format(
 @"<div style=""width:{0}px;height:{1}px"" id='video1' class='flowplayer' data-swf='flowplayer.swf' data-ratio='0.4167'>
     <video>
        <source type='videoformat:{0}' src='VideoSource:{0}'/>
   </video></div>", 
   videoformat, width, height);

This makes the mistake more obvious: you're referencing argument 0 more than once, and only used three of the values you need. Do this instead:

string.Format(
 @"<div style=""width:{0}px;height:{1}px"" id='video1' class='flowplayer' data-swf='flowplayer.swf' data-ratio='0.4167'>
     <video>
        <source type='videoformat:{2}' src='VideoSource:{3}'/>
   </video></div>", 
   width, height, videoformat, VideoSource);

Also, don't forget to assign the result somewhere. Finally, to condense it back to match the original:

string result = string.Format("<div style=\"width:{0}px;height:{1}px\" id='video1' class='flowplayer' data-swf='flowplayer.swf' data-ratio='0.4167'><video><source type='videoformat:{2}' src='VideoSource:{3}'/></video></div>", width, height, videoformat, VideoSource);

Answer 2

Does this work for you?

string.Format("<div style=\"width:{0}px;height:{1}px\" id='video1' class='flowplayer' data-swf='flowplayer.swf' data-ratio='0.4167'>**<video><source type='videoformat:{2}' src='VideoSource:{3}'/></video>**</div>", width, height, videoFormat, VideoSource);

I just updated your string with substitution markers 0-3 and then matched up the arguments.