JS上传CC视频

作者: haibao 分类: php,案例 发布时间: 2017-06-09 10:56
以用户为中心, 其它一切纷至沓来!——Google 信条

如题:

公司正在使用CC视频服务,项目中有上传视频的需求,所以参照其文档,使用了flash上传的方式做了以下功能。

吐槽一下,他们本身的API对Firefox的支持不太好,Chrome下没问题,其他浏览器暂时没测。

好了,言归正传,开始吧。

此处建立在已有付费账号,并且有后端支持的基础下,首先下载CC官方的sdk放入项目中,比如:

然后HTML中引入swfobject.js。

css此处省略.. 大概样式如下图:

html代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div id="exportVideo" class="videoTypeBox active">
     <!--添加视频-->
     <div class="addFileArea pr" id="selectVideo">
         <i class="iconfont icon-append-circle"></i>
         <span class="fw text-center db_">添加视频</span>
         <div id="swfDiv"></div>
     </div>
     <input id="videoFile" type="hidden" value="" />
 
     <!--选择视频后-->
     <div id="videoLoad" class="fileLoadArea dn dataTable">
         <table width="100%">
              <thead>
                  <th width="35%">文件名</th>
                  <th width="15%">大小</th>
                  <th width="40%">状态</th>
                  <th width="10%">操作</th>
              </thead>
              <tbody>
                  <tr>
                      <td id="videotitle">-</td>
                      <td id="videofileSize">-</td>
                      <td id="videoStatus">
                          <!--正在上传的状态-->
                          <div class="statusBox">
                               <div class="progressBar pr">
                                   <div class="currentProgress">
                                        <div id="progressed"></div>
                                   </div>
                                   <span class="progressTxt">待选择</span>
                               </div>
 
                               <!--审核中-->
                               <p class="inReview dn">审核中...</p>
                           </div>
                        </td>
                        <td>
                            <i class="iconfont icon-shanchu delCurrentVideo" title="删除"></i>
                        </td>
                   </tr>
               </tbody>
           </table>
       </div>
       <input type="hidden" value="" id="videoId"/>
</div>

js代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
window.onload = function(){
    // 加载上传flash ------------- start
    var swfobj = new SWFObject('http://union.bokecc.com/flash/api/uploader.swf', 'uploadswf', '500', '75', '8');
    swfobj.addVariable( "progress_interval" , 1);	//	上传进度通知间隔时长(单位:s)
    swfobj.addVariable( "notify_url" , "/ccsdk/notify.php");	//	上传视频后回调接口
    swfobj.addParam('allowFullscreen','true');
    swfobj.addParam('allowScriptAccess','always');
    swfobj.addParam('wmode','transparent');
    swfobj.write('swfDiv');
    // 加载上传flash ------------- end
}
 
//-------------------
//调用者:flash
//功能:选中上传文件,获取文件名函数
//时间:2010-12-22
//说明:用户可以加入相应逻辑
//-------------------
function on_spark_selected_file(file_name,file_size) {
    document.getElementById('videoLoad').style.display = 'block';
    document.getElementById("videoFile").value = file_name;
    document.getElementById("videotitle").innerText = file_name;
    document.getElementById("videofileSize").innerText = bytesToSize(file_size);
    submitVideo();
}
 
//-------------------
//调用者:flash
//功能:验证上传是否正常进行函数
//时间:2010-12-22
//说明:用户可以加入相应逻辑
//-------------------
function on_spark_upload_validated(status, videoid) {
    if (status == "OK") {
        document.getElementById("videoId").value = videoid;
    } else if (status == "NETWORK_ERROR") {
        alert("网络错误");
    } else {
        alert("api错误码:" + status);
    }
}
 
//-------------------
//调用者:flash
//功能:通知上传进度函数
//时间:2010-12-22
//说明:用户可以加入相应逻辑
//-------------------
function on_spark_upload_progress(progress) {
    var uploadProgress = document.getElementById("progressed");
    var uploadProgressTxt = document.querySelector(".progressTxt");
    if (progress == -1) {
        uploadProgress.style.width = '0%';
        uploadProgressTxt.innerText = "上传出错";
        document.getElementById('swfDiv').style.display = 'none';
    } else {
        uploadProgress.style.width = progress + '%';
        uploadProgressTxt.innerText = progress == 100 ? '上传完成' : "正在上传";
        if(progress == 100){
            document.getElementById('swfDiv').style.display = 'none';
        }
    }
}
 
function getAjax() {
    var oHttpReq = null;
 
    if (window.XMLHttpRequest) {
        oHttpReq = new XMLHttpRequest;
        if (oHttpReq.overrideMimeType) {
            oHttpReq.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        try {
            oHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            oHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
    } else if (window.createRequest) {
        oHttpReq = window.createRequest();
    } else {
        oHttpReq = new XMLHttpRequest();
    }
 
    return oHttpReq;
}
 
//文件大小转换
function bytesToSize(bytes) {
    if (bytes === 0) return '0 B';
    var k = 1000, // or 1024
        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));
    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}

至此,功能开发差不多了,后续优化再补充吧。

本文地址:[JS上传CC视频],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

一条评论
  • 直销

    2017/06/13 上午 10:12

    好几年没用过博客了,支持下!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>