mui 上传视频

mui 前端传输视频

//上传视频
            function videoUpload() {
                var url = ServerIp + "/api/upload/videoUpload";
                var task = plus.uploader.createUpload(url, {
                        method: "POST"
                    },
                    function(t, status) {
                        if (status == 200) {
                            var hl = document.getElementById('history');
                            hl.innerHTML = '<li id="empty" class="ditem-empty"></li>';
                            hl.style.display = 'none';
                            console.log("上传成功：" + t.responseText);
                            videos = [];
                            vindex = 1;
                        } else {
                            console.log("上传失败：" + status);
                            videos = [];
                        }
                    }
                );
                //添加其他参数
                for (var i = 0; i < videos.length; i++) {
                    var f = videos[i];
                    task.addFile(f.path, {
                        key: f.name
                    });
                }
                task.addData("business_id", confirm_id);
                task.addData("business_type", "整改确认");
                task.addData("item_id", _localStorage.getItem("record_id")); //记录表id
                task.addData("file_type", 2);
                task.addData("create_user", localStorage.getItem("realName"));
                task.start();
            }

var i = 1;
            var w = null;
var videos = [];
var vindex = 1;
                        //上传视频
                        document.getElementById('video').addEventListener('tap', function(e) {
                            if (mui.os.plus) {
                                var buttonTit = [{
                                    title: "录制"
                                }, {
                                    title: "从手机相册选择"
                                }];
                            
                                plus.nativeUI.actionSheet({
                                    cancel: "取消",
                                    buttons: buttonTit
                                }, function(b) {
                                    switch (b.index) {
                                        case 0:
                                            break;
                                        case 1:
                                            getVideo(); //录制视频
                                            break;
                                        case 2:
                                            galleryVideo(); //打开相册
                                            break;
                                        default:
                                            break;
                                    }
                                })
                            }
                        });
            //录制
            function getVideo() {
                var cmr = plus.camera.getCamera();
                cmr.startVideoCapture(function(p) {
                    console.log('成功：' + p);
                    plus.io.resolveLocalFileSystemURL(p, function(entry) {
                        createItem(entry);
                        appendVideo(p);
                    }, function(e) {
                        console.log('读取录像文件错误：' + e.message);
                    });
                }, function(e) {
                    console.log('失败：' + e.message);
                }, {
                    filename: '_doc/camera/',
                    index: i
                });
            }
            // 从相册中选择视频
            function galleryVideo() {
                plus.gallery.pick(function(e) {
                    plus.io.resolveLocalFileSystemURL(e, function(entry) {
                        createItem(entry);
                        //获取视频流文件
                        appendVideo(e);
                    }, function(p) {
                        console.log('读取录像文件错误：' + p.message);
                    });
                }, function(e) {
                    console.log("取消选择视频");
                }, {
                    filter: "video"
                });
            }
            // 添加播放项
            function createItem(entry) {
                $("#history").remove();
                var divHtml = "<div class="a-add dlist" id="history">";
                divHtml += "<div id="empty" class="ditem-empty"></div>";
                divHtml += "<img  src="../../images/remove.png" class="a-remove_video"></div>";
                $("#imgDiv").prepend(divHtml);
                createItem1(entry);
            }
            
            function createItem1(entry) {
                var hl = document.getElementById('history');
                //hl.innerHTML = '<li id="empty" class="ditem-empty"></li>';
                //hl.style.display = 'block';
                var le = document.getElementById('empty');
                var li = document.createElement('div');
                li.className = 'ditem';
                li.innerHTML = '<span class="iplay"><font class="ainf"></font></span>'
                li.setAttribute('onclick', 'displayFile(this)');
                hl.insertBefore(li, le.nextSibling);
                li.querySelector('.ainf').innerText = '...';
                li.entry = entry;
                updateInformation(li);
                // 设置空项不可见
                le.style.display = 'none';
            }
            function displayFile(li) {
                if (w) {
                    mui.alert('重复点击！');
                    return;
                }
                if (!li || !li.entry) {
                    mui.alert('无效的媒体文件');
                    return;
                }
                var name = li.entry.name;
                var suffix = name.substr(name.lastIndexOf('.'));
                var url = '';
                if (suffix == '.mov' || suffix == '.3gp' || suffix == '.mp4' || suffix == '.avi') {
                    url = '/plus/camera_video.html';
                } else {
                    url = '/plus/camera_image.html';
                }
                w = plus.webview.create(url, url, {
                    hardwareAccelerated: true,
                    scrollIndicator: 'none',
                    scalable: true,
                    bounce: 'all'
                });
                w.addEventListener('loaded', function() {
                    w.evalJS('loadMedia("' + li.entry.toLocalURL() + '")');
                }, false);
                w.addEventListener('close', function() {
                    w = null;
                }, false);
                w.show('pop-in');
            }
            // 获取录音文件信息
            function updateInformation(li) {
                if (!li || !li.entry) {
                    return;
                }
                var entry = li.entry;
                entry.getMetadata(function(metadata) {
                    li.querySelector('.ainf').innerText = dateToStr(metadata.modificationTime);
                }, function(e) {
                    console.log('获取文件"' + entry.name + '"信息失败：' + e.message);
                });
            }

//视频
            function appendVideo(e) {
                videos = [];
                videos.push({
                    name: "file", //这个值服务器会用到，作为file的key 
                    path: e,
                });
                vindex++;
            }

视频播放页

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
        <title>Hello H5+</title>
        <script type="text/javascript" src="../js/extend.js"></script>
        <script type="text/javascript">
var v=null;
function loadMedia( src ) {
    v.src = src;
    v.play();
}
function videoFinished() {
    back();
}
function videoError(e) {
    switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }

    plus.nativeUI.alert( "无效的视频资源", function(){
        back();
    } );
}
function init() {
    v = document.getElementById("video");
    //v.onended = videoFinished;
}
        </script>
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
    </head>
    <body style="text-align:center;background:#DDDDDD;" onload="init();">
        <div style="100%;height:100%;display:table;" onclick="back();">
            <div style="display:table-cell;vertical-align:middle;">
                <video id="video" style="100%;" autoplay controls onerror="videoError(event);"></video>
            </div>
        </div>
    </body>
</html>

后台接口

[Route("videoUpload"), HttpPost]
        public IHttpActionResult videoUpload()
        {
            bool result = false;
            int count = HttpContext.Current.Request.Files.Count;
            string filename = "";
            string compressname = "";
            try
            {
                for (int i = 0; i < count; i++)
                {
                    //int l = HttpContext.Current.Request.Files["video" + (i + 1)].ContentLength;
                    int l = HttpContext.Current.Request.Files["file"].ContentLength;
                    byte[] buffer = new byte[l];
                    //Stream s = HttpContext.Current.Request.Files["video" + (i + 1)].InputStream;
                    Stream s = HttpContext.Current.Request.Files["file"].InputStream;
                    string imgname = Guid.NewGuid().ToString() + ".mp4";
                    string comname = Guid.NewGuid().ToString();
                    AliyunOSS.PutObject(bucketName, "不符合项/" + imgname, s);
                    #region 记录表
                    im_file file = new im_file();
                    file.id = Guid.NewGuid().ToString();
                    file.business_id = HttpContext.Current.Request.Form["business_id"];
                    file.business_type = HttpContext.Current.Request.Form["business_type"];
                    file.item_id = HttpContext.Current.Request.Form["item_id"];
                    file.file_name = "不符合项/" + imgname;
                    file.file_path = filename;
                    file.compressedfile_path = compressname;
                    file.file_type = 2;
                    file.create_user = HttpContext.Current.Request.Form["create_user"];
                    file.create_date = DateTime.Now;
                    _fileRepository.Insert(file);
                    #endregion
                    result = true;
                }
            }
            catch (Exception e)
            {
                result = false;
            }
            return Ok(result);
        }