MVC視訊播放器

大家好，今天發現一個很不錯的播放器分享給大家！！！

原文位址：https://www.cnblogs.com/zhangyongl/p/8312881.html

原文部落客的背景是PHP寫的，本片将使用C#實作背景代碼，html+js和原文基本一緻。

html 代碼

<div>
    <div id="content">
        <p class="_p"><span>視訊标題</span>：<input id="title" type="text" class="form-control" placeholder="請輸入視訊名稱"></p>
        <p class="_p">
            <span>選擇視訊： </span>
            <!--檔案選擇按鈕-->
            <a class="list" href="javascript:;" target="_blank" rel="external nofollow" >
                <input id="file" type="file" name="myfile" onchange="UpladFile();" /><span>選擇視訊</span>
            </a>
            <!--上傳速度顯示-->
            <span id="time"></span>
        </p>
        <!--顯示消失-->
        <ul class="el-upload-list el-upload-list--text" style="display:  none;">
            <li tabindex="0" class="el-upload-list__item is-success">
                <a class="el-upload-list__item-name">
                    <i class="el-icon-document"></i><span id="videoName">food.jpeg</span>
                </a>
                <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-circle-check"></i>
                </label>
                <i class="el-icon-close" onclick="del();"></i>
                <i class="el-icon-close-tip"></i>
            </li>
        </ul>

        <!--進度條-->
        <div class="el-progress el-progress--line" style="display: none;">
            <div class="el-progress-bar">
                <div class="el-progress-bar__outer" style="height: 6px;">
                    <div class="el-progress-bar__inner" style="width: 0%;">
                    </div>
                </div>
            </div>
            <div class="el-progress__text" style="font-size: 14.4px;">0%</div>
        </div>
        <p class="_p"><span>上傳視訊</span>：<button class="btn btn-primary" type="button" onclick="sub();">上傳</button></p>

        <!--預覽框-->
        <div class="preview">

        </div>
    </div>


</div>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
    var xhr;//異步請求對象
    var ot; //時間
    var oloaded;//大小
    //上傳檔案方法
    function UpladFile() {
        var fileObj = document.getElementById("file").files[0]; // js 擷取檔案對象
        if (fileObj.name) {
            $(".el-upload-list").css("display", "block");
            $(".el-upload-list li").css("border", "1px solid #20a0ff");
            $("#videoName").text(fileObj.name);
        } else {
            alert("請選擇檔案");
        }
    }
    /*點選取消*/
    function del() {
        $("#file").val(''); $("#videoNameEdit").val('');
        $(".el-upload-list").css("display", "none");
    }
    /*點選送出*/
    function sub() {
        var fileObj = document.getElementById("file").files[0]; // js 擷取檔案對象
        if (fileObj == undefined || fileObj == "") {
            alert("請選擇檔案");
            return false;
        };
        var title = $.trim($("#title").val());
        if (title == '') {
            alert("請填寫視訊标題");
            return false;
        }
        var url = "/Video/UploadVideo"; // 接收上傳檔案的背景位址
        var form = new FormData(); // FormData 對象
        form.append("mf", fileObj); // 檔案對象
        form.append("title", title); // 标題
        xhr = new XMLHttpRequest(); // XMLHttpRequest 對象
        xhr.open("post", url, true); //post方式，url為伺服器請求位址，true 該參數規定請求是否異步處理。
        xhr.onload = uploadComplete; //請求完成
        xhr.onerror = uploadFailed; //請求失敗
        xhr.upload.onprogress = progressFunction; //【上傳進度調用方法實作】
        xhr.upload.onloadstart = function () { //上傳開始執行方法
            ot = new Date().getTime(); //設定上傳開始時間
            oloaded = 0; //設定上傳開始時，以上傳的檔案大小為0
        };
        xhr.send(form); //開始上傳，發送form資料
    }

    //上傳進度實作方法，上傳過程中會頻繁調用該方法
    function progressFunction(evt) {
        // event.total是需要傳輸的總位元組，event.loaded是已經傳輸的位元組。如果event.lengthComputable不為真，則event.total等于0
        if (evt.lengthComputable) {
            $(".el-progress--line").css("display", "block");
            /*進度條顯示進度*/
            $(".el-progress-bar__inner").css("width", Math.round(evt.loaded / evt.total * 100) + "%");
            $(".el-progress__text").html(Math.round(evt.loaded / evt.total * 100) + "%");
        }

        var time = document.getElementById("time");
        var nt = new Date().getTime(); //擷取目前時間
        var pertime = (nt - ot) / 1000; //計算出上次調用該方法時到現在的時間差，機關為s
        ot = new Date().getTime(); //重新指派時間，用于下次計算

        var perload = evt.loaded - oloaded; //計算該分段上傳的檔案大小，機關b
        oloaded = evt.loaded; //重新指派已上傳檔案大小，用以下次計算

        //上傳速度計算
        var speed = perload / pertime; //機關b/s
        var bspeed = speed;
        var units = 'b/s'; //機關名稱
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'k/s';
        }
        if (speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'M/s';
        }
        speed = speed.toFixed(1);
        //剩餘時間
        var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
        time.innerHTML = '上傳速度：' + speed + units + ',剩餘時間：' + resttime + 's';
        if (bspeed == 0)
            time.innerHTML = '上傳已取消';
    }
    //上傳成功響應
    function uploadComplete(evt) {
        var data = jQuery.parseJSON(evt.target.responseText);
        //服務斷接收完檔案傳回的結果  注意傳回的字元串要去掉雙引号
        if (data.code > 0) {
            //var str =  evt.target.responseText;
            alert("上傳成功！");
            parent.location.reload();
        } else {

            alert(data.message);
        }
    }
    //上傳失敗
    function uploadFailed(evt) {
        alert("上傳失敗！");
    }
</script>
           

控制器代碼

//上傳視訊

[HttpPost]

public ActionResult UploadVideo()

{

var httpRequest = HttpContext.Request;

var vName = httpRequest.Form[“title”];

var vfile = httpRequest.Files.Get(0);

string src = “”;

string gb_img_scr = “”;

int resultCode = 0;

//判斷檔案是否為空

if (vfile != null)

{

var nowDta = DateTime.Now.ToString(“yyyy-MM-dd”);

//擷取檔案類型

string fileExtension = System.IO.Path.GetExtension(vfile.FileName);

var fullname = System.IO.Path.GetFileNameWithoutExtension(vfile.FileName);

//自定義檔案名（檔案名稱+唯一辨別符+字尾）

string fileName = fullname + Guid.NewGuid().ToString(“N”) + fileExtension;

//判斷是否存在需要的目錄，不存在則建立

var SavePath = “/upload/video/” + nowDta;

if (!Directory.Exists(Server.MapPath(SavePath)))

{ Directory.CreateDirectory(Server.MapPath(SavePath)); }

//拼接儲存檔案的詳細路徑

string filePath = Server.MapPath(SavePath + “//”) + fileName;

//若擴充名不為空則判斷檔案是否是指定視訊類型

if (fileExtension != null)

{

if ("(.mp4)|(.avi)|(.flv)|(.rmvb)|(.wmv)".Contains(fileExtension))

{

//儲存檔案

vfile.SaveAs(filePath);

//拼接傳回的Img标簽

src = SavePath + “/” + fileName;

//擷取視訊第一幀當做視訊背景圖：

//gb_img_scr = PicFromVideo.GetPicFromVideo(src, “160*240”, “1”);

resultCode = 1;

}

else

{

src = “不是視訊格式！”;

resultCode = -1;

}

}

else

{ src = “上傳失敗！”; resultCode = -2; }

}

else

{ src = “沒有找到該檔案！”; resultCode = -3; }

if (resultCode == 1)

{

//resultCode = adultvideoBll.add(vName, src, gb_img_scr);//向資料庫中添加一條資料

}

return Json(new { code = resultCode, message = src });


    }