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.