최근에 업로드 한 비디오를 직접 표시하려면 어떻게해야합니까?

Question

.MP4와 OGG 형식으로 동일한 비디오를 업로드하면 videojs를 사용하여 생성 된 비디오 태그가 크로스 플랫폼이된다는 것을 보여주는 개념 증명을 작성하지 않겠습니다.

디자이너를 사용하여 파일 업로드 프로그램을 성공적으로 만들었으며 최대 512MB의 파일을 솔루션 내부의 "파일"폴더에 업로드했지만 생성 된 비디오 태그로 웹 페이지를 업데이트하는 방법을 알고 싶습니다.

<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> 

이 방법 저장 내 :

이

내가 변경하고자하는 태그입니다

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

편집 :

나는 거의 지금 해결책을 가지고 있습니다. 어떻게 든 올바른 길을 찾지 못합니다. 이 솔루션은 내가 만든 :

<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> 

그리고 서버 측에서 : 나는 또한 내 Web.config의이 추가

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("\\", "\\\\"); 
    } 
} 

:

<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> 

그것은 지금의 경로를 변경 (에 내 경우) C : \ Projects \ FileUploadTest \ FileUploadTest \ Files \ c4b3ae2189ea.ogg. 이것은 파일이 업로드되는 실제 경로이지만 브라우저는이 경로에 도달 할 수 없습니다. 누구든지 이것을 달성하는 방법을 알고 있습니까?

Answer 1

플래시 대체물에 대해서는 분명히 할 수 없습니다. Chrome과 같은 브라우저에서도 작동합니다. 모든 브라우저에서 Flash가 더 이상 사용되지 않을 예정입니다.).

Answer 2

이 리터럴

<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}'> 
    <asp:Literal ID="ltSources" runat="server"></asp:Literal> 
</video> 

를 추가하여 귀하의 버튼 이벤트

protected void Button1_Click(object sender, EventArgs e) 
    { 
     StringBuilder sb = new StringBuilder(); 
     string mp4Url = "http://video-js.zencoder.com/oceans-clip.mp4"; 
     string webmUrl = "http://video-js.zencoder.com/oceans-clip.webm"; 
     string oggUrl = "http://video-js.zencoder.com/oceans-clip.ogv"; 

     sb.AppendFormat("<source id=\"mp4\" src=\"{0}\" type='video/mp4' />", mp4Url); 
     sb.AppendFormat("<source id=\"webm\" src=\"{0}\" type='video/webm' />", webmUrl); 
     sb.AppendFormat("<source id=\"ogg\" src=\"{0}\" type='video/ogg' />", oggUrl); 

     ltSources.Text = sb.ToString(); 
    } 

을의 간단한 방법이며 최고의 U가 필요

Answer 3

그것의 사용자 컨트롤을 만드는 것입니다 예를 들어 yr 파일을 c:\www\mysite\uploadfolder에 업로드하면이 URL을 만들어야합니다. http://mysite/uploadfolder/movieFileName.ogg