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="width:100%;height:100%;display:table;" onclick="back();"> <div style="display:table-cell;vertical-align:middle;"> <video id="video" style="width: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); }