How can I directly show a recently uploaded video?

Question

I wan't to create a proof of concept that shows the user that if they upload the same video in both .MP4 and OGG format, the generated video tag (using videojs) will be cross platform.

I have succesfully created a fileuploader using the designer and it uploads files up to 512mb, to the folder "files" inside the solution, but I would like to know how to update the web page with the generated video tag.

This is the tag I would like to change:

<video id="example_video_1" class="video-js vjs-default-skin"  
      controls preload="auto" width="640" height="264"  
      poster="http://video-js.zencoder.com/oceans-clip.png"  
      data-setup='{"example_option":true}'>  
   <source id="mp4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />  
   <source id="webm" src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />  
   <source id="ogg" src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />  
</video>

My save method:

protected void btnUpload_Click(object sender, EventArgs e){    
            //check to make sure a file is selected    
            if (FileUpload1.HasFile)    {
                //create the path to save the file to        
                string fileName = Path.Combine(Server.MapPath("~/Files"), FileUpload1.FileName);
                //save the file to our local path
                FileUpload1.SaveAs(fileName);    
            }
        }

EDIT:

I almost have the solution now. somehow it doesn't get the right path. The solution I created:

<script type="text/javascript">
    var _strSource = '<ASP:LITERAL runat="server" id="litSource" />';
    window.onload = function ()
    {
        if ( _strSource != "" ) {
            alert( _strSource );
            var video = document.getElementById( 'objVideo' );
            var sources = video.getElementsByTagName( 'source' );
            alert( sources[0].src );
            sources[0].src = _strSource;
            video.load();
            video.play();
        }
    }
</script>

And on the server side:

protected void btnUpload_Click(object sender, EventArgs e){
    //check to make sure a file is selected    
    if (FileUpload1.HasFile)    {
        //create the path to save the file to        
        string fileName = Path.Combine(Server.MapPath("/Files"), FileUpload1.FileName);
        //save the file to our local path
        FileUpload1.SaveAs(fileName);
        this.litSource.Text = fileName.Replace("\\", "\\\\");
    }
}

I also added this in my web.config:

<staticContent>
  <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
  <mimeMap fileExtension=".webm" mimeType="video/webm" />
  <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
</staticContent>

It now changes the path to (in my case) C:\Projects\FileUploadTest\FileUploadTest\Files\c4b3ae2189ea.ogg. This is the actual path where the file gets uploaded to, but the browser cannot reach this path. Does anyone has an idea how to achieve this?

Answer 1

U need to create an url that can be reached with a browser, so for example if yr file is uploaded to c:\www\mysite\uploadfolder you would have to create this url http://mysite/uploadfolder/movieFileName.ogg