关于cc的上传视频,视频回放功能

关于视频上传,cc 视频上传是用flash 进行上传的,首先引入 swfobject/swfobject.js 和 uploadFlashvideo.js,
uploadFlashvideo.js 文件 如下:

var ctx = 'http://192.168.147.35:9510/pc/api'
    //	-------------------
    //	调用者:flash
    //	功能:选中上传文件,获取文件名函数
    //	时间:2010-12-22
    //	说明:用户可以加入相应逻辑
    //var swfDivIndex = 0;

function on_spark_selected_file(filename, tag, description) {
    document.getElementsByClassName("videofile")[0].value = filename;
    submitvideo();
}

//	-------------------
//	调用者:flash
//	功能:验证上传是否正常进行函数
//	时间:2010-12-22
//	说明:用户可以加入相应逻辑
//	-------------------
function on_spark_upload_validated(status, videoid) {
    if (status == "OK") {
        document.getElementsByClassName('vid')[0].innerHTML = videoid;
    } else if (status == "NETWORK_ERROR") {
        alert("网络错误");
    } else {
        alert("api错误码:" + status);
    }
}

//	-------------------
//	调用者:flash
//	功能:通知上传进度函数
//	时间:2010-12-22
//	说明:用户可以加入相应逻辑
//	-------------------
function on_spark_upload_progress(progress) {
    var success = document.getElementsByClassName("success")[0];
    var warn = document.getElementsByClassName("warn")[0];
    var uploadProgress = document.getElementsByClassName("progress")[0];
    if (progress == -1) {
        warn.style.display = 'block';
    } else if (progress == 100) {
        uploadProgress.innerHTML = "100%";
        success.style.display = 'block';
    } else {
        uploadProgress.innerHTML = progress + "%";
    }
}

function positionUploadSWF() {
    /* document.getElementById("swfDiv").style.width = document
            .getElementById("btn_width").style.width;
    document.getElementById("swfDiv").style.height = document
            .getElementById("btn_width").style.height; */
}

//控制上传
function submitvideo() {
    var title = encodeURIComponent(
        document.getElementsByClassName("videofile")[0].value, "utf-8");
    document.getElementsByClassName("request_params")[0].innerHTML = title;
    var url = ctx + "/cc/getUploadUrl?title=" + title +
        "&tag=" + '' +
        "&description=" + title;
    var req = getAjax();
    req.open("GET", url, true);
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            if (req.status == 200) {
                var re = JSON.parse(req.responseText).data; //获取返回的内容
                var embedId = "embed" + 0
                document.getElementById(embedId).start_upload(re); //	调用flash上传函数

            }
        }
    };
    req.send(null);
}

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

上传文件按钮 写法

<div>
      <el-input class="videofile" name="videofile" size="small" style="display:none;"></el-input>
        <div style="position:relative;display:inline-block;" >
          <el-button size="mini" value="upload" id="btn_width" type="primary">上传</el-button>
          <div :id="swfDiv" style="position:absolute;left:0;top:0;"></div>
        </div>
        <div class="progress-video">
          <div><span>视频ID:</span><label class="videoIdClass vid" ref="videoId">{{videoValue}}</label></div>
          <div style="display:none;"> <span>视频名称:</span><span class="request_params"></span></div>
          <div>
            <span class="progress"></span>
            <i class="el-icon-circle-check progressIcon success" style="color:#67C23A;display:none;"></i>
            <i class="el-icon-warning progressIcon warn" style="color:#F56C6C;display:none;"></i></div>
        </div>

一进入页面把上传按钮加载出来 触发 下面的方法:

uploaderFlash(){
      var swfobj=new SWFObject('http://union.bokecc.com/flash/api/uploader.swf', this.embedIndex, '80', '28','8'); 
      swfobj.addVariable( "progress_interval" , 1);	
      swfobj.addVariable('title' ,'test');
      swfobj.addVariable('number', 123);
      swfobj.addParam('allowFullscreen','true'); 
      swfobj.addParam('allowScriptAccess','always'); 
      swfobj.addParam('wmode','transparent'); 
      swfobj.write(this.swfDiv); 
    },

视频回放:
关于视频回放,应该调用后台接口,然后会返回一串script ,然后

videoScript = videoScript.match(/<script .*?src=\"(.+?)\"/)[1];   //获取script里面的内容
                        that.videoScript = videoScript;
                        setTimeout( function() {
                            var doc = document.getElementById('videoplayer');
                            var script = document.createElement('script');
                            script.type = 'text/javascript';
                            script.src = that.videoScript;
                            doc.appendChild(script);  //在页面中创建一个script ,并把内容插入到 文本中
                        }, 200 );
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值