Web 页面上传视频

1 上传视频具体实现步骤,创建上传页面upload.html

1.1 页面中加入CSS

<link href="http://cloud.youku.com/assets/lib/bootstrap2.1.0/css/bootstrap.css" rel="stylesheet">
<link href="http://cloud.youku.com/assets/lib/bootstrap2.1.0/css/bootstrap-responsive.css" rel="stylesheet">

1.2 页面中加入JS

<script src="http://cloud.youku.com/assets/lib/jquery-1.8.1.min.js"></script>
<script src="http://cloud.youku.com/assets/lib/uploadjs.php"></script>

1.3 页面中加入上传所需的DOM节点

<div id="youku-upload">
        <div class="container">
            <form class="well form-horizontal" name="video-upload">
                <fieldset>
                            <div class="control-group">
                        <label class="control-label" for="spanSWFUploadButton">选择文件:</label>
                        <div id="uploadControl" class="controls"></div>
                    </div>
                    <div class="control-group">
                       <label class="control-label" for="input01">标题:</label>
                      <div class="controls">
                          <input type="text" class="input-xlarge" id="input01" name="title">
                      </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="textarea">简介:</label>
                    <div class="controls">
                        <textarea class="input-xlarge" id="textarea" rows="3" name="description"></textarea>
                    </div>
                </div>
                   <div class="control-group">
                       <label class="control-label" for="input02">标签:</label>
                       <div class="controls">
                          <input type="text" class="input-xlarge" id="input02" name="tags">
                          <span class="help-inline"></span>
                      </div>
                   </div>
               <div class="control-group">
                    <label class="control-label" for="category-node">类别:</label>
                    <div class="controls">
                        <select id="category-node" name="category" ></select>
                     </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">版权所有</label>
                   <div class="controls">
                   <label class="radio inline">
                        <input type="radio" name="copyright_type" id="copyright_type2" value="original" checked="">原创
                    </label>
                    <label class="radio inline">
                   <input type="radio" name="copyright_type" id="copyright_type1" value="reproduced">转载
               </label>
     </div>
    </div>
    <div class="control-group">
       <label class="control-label">视频权限</label>
          <div class="controls">
                 <label class="radio inline">
                   <input type="radio" name="public_type" id="public_type1" value="all" checked="">公开
                 </label>
                 <label class="radio inline">
                   <input type="radio" name="public_type" id="public_type2" value="friend">仅好友
                 </label>
                 <label class="radio inline">
                    <input type="radio" name="public_type" id="public_type3" value="password">输入密码观看
                 </label>
                 <label class="radio inline" style="display:none" id="passwrod">
                    <input type="text" class="input "name="watch_password">
                 </label>
         </div>
    </div>
    <div class="form-actions">
            <button type="submit" class="btn btn-primary start" id="btn-upload-start">
             <i class="icon-upload icon-white"></i>
        <span>开始上传</span>
        </button>
    </div>
    </fieldset>
    </form>
    <div class="row" >
        <div class="span5" id="upload-status-wraper" ></div>
    </div>
    <br>
    <div class="well"><h3>说明</h3><ul><li>最大支持上传<strong>1 GB</strong> 视频文件</li><li>允许上传的视频格式为:wmv,avi,dat,asf,rm,rmvb,ram,mpg,mpeg,3gp,mov,mp4,m4v,dvix,dv,dat,</br>mkv,flv,vob,ram,qt,divx,cpk,fli,flc,mod。不符合格式的视频将会被丢弃,请确保视频格式的正确性,避免上传失败</li><li></li></ul>
    </div>
    </div>
    <!--完成上传的DOM和登录DOM 开始-->
    <div id="complete"></div>
    <div id="login" style="width:100%;height:100%;position:fixed;z-index:999;left:0px;top:0px;overflow:hidden;display:none;">
    </div>
    <!--完成上传的DOM和登录DOM 结束-->

1.4 JS调用初始化

<script>
        //document.domain = "youku.com";
        var USE_STREAM_UPLOAD = true;
        jQuery(document).ready(function(){       
            var param = {client_id:"",access_token:"",completeCallback:"uploadComplete"};
            youkuUploadInit(param);
       });
        //上传完成时回调方法
        function uploadComplete(data){
                alert("videoid="+data.videoid+";title="+data.title);
                uploadagain();
        }
 </script>

1.5 param参数的解释

  • client_id:应用id

  • access_token:认证token 
    手动获取access_token

  • completeCallback:上传完成后callback函数

{
            client_id:"",
            access_token:"",
            completeCallback:"uploadComplete"
    }