5

.MP4 と OGG の両方の形式で同じビデオをアップロードすると、生成されたビデオ タグ (videojs を使用) がクロス プラットフォームになることをユーザーに示す概念実証を作成したくありません。

デザイナーを使用して fileuploader を正常に作成し、最大 512 MB のファイルをソリューション内の "files" フォルダーにアップロードしますが、生成されたビデオ タグで Web ページを更新する方法を知りたいです。

これは私が変更したいタグです：

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

そしてサーバー側では：

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

これも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>

これで、パスが (私の場合) C:\Projects\FileUploadTest\FileUploadTest\Files\c4b3ae2189ea.ogg に変更されます。これはファイルがアップロードされる実際のパスですが、ブラウザはこのパスに到達できません。これを達成する方法を知っている人はいますか？

4

3 に答える 3

1

ブラウザでアクセスできる URL を作成する必要があります。たとえば、yr ファイルがアップロードされたc:\www\mysite\uploadfolder場合、この URL を作成する必要があります。http://mysite/uploadfolder/movieFileName.ogg

于 2012-06-25T05:31:17.233 に答える
0

これは、リテラルを追加することによる簡単な方法です

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

そして、それからユーザーコントロールを作成するのが最善です

于 2012-06-19T10:20:10.187 に答える
0

どうやらFlashフォールバックではできません。ただし、Chrome などのブラウザでは動作します。そろそろ、すべてのブラウザで Flash が非推奨になります ;)。

于 2013-04-07T09:32:26.113 に答える