BIM-Monitor/script/js/video-play.js

const fileType = {
    "pptx": "fa-file-powerpoint-o",
    "ppt": "fa-file-powerpoint-o",
    "docx": "fa-file-word-o",
    "doc": "fa-file-word-o",
    "xls": "fa-file-excel-o",
    "xlsx": "fa-file-excel-o",
    "pdf": "fa-file-pdf-o",
    "zip": "fa-file-archive-o",
    "rar": "fa-file-archive-o",
    "png": "fa-file-image-o",
}

$(document).ready(function () {
    getVideoInfo();
    getVideoFile();
    $('#video').bind('contextmenu', function () {
        return false;
    });
    setListHeight();
});
$(window).resize(function () {
    setListHeight();
});
$(".sidebar-toggle").click(function () {
    setTimeout(function () {
        setListHeight();
    }, 10);
});

function getVideoInfo() {
    $.ajax({
        url: "./script/php/video/getInfo.php",
        type: "POST",
        data: {
            id: id,
        },
        dataType: "json"
    }).done(function (result) {
        getDescription(result[0].description);
        getVideoList(result[0].dir_name);
    }).error(function (error) {
        console.log(error);
    });
}

function getVideoList(dir) {
    $.ajax({
        url: "./script/php/video/getList.php",
        type: "POST",
        data: {
            dir: dir,
        },
        dataType: "json"
    }).done(function (result) {
        let videos = result["Video_Table"];
        let files = result["File_Table"];
        $("#video-list").empty();
        for (j = 0; j < videos.length; j++) {
            if (videos[j].file_path.includes(".m3u8")) {
                if (videos[j].id == id)
                    $("#video-list").append("<li><a class='list-a' style='color:#0088CC;background-color:#B3E5FF' href = '#' onclick='getVideo(" + videos[j].id + ", \"" + folder + "\")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
                else
                    $("#video-list").append("<li><a class='list-a' style='color:#0088CC;' href = '#' onclick='getVideo(" + videos[j].id + ", \"" + folder + "\")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
            }
        }
        for (j = 0; j < files.length; j++) {
            $("#file-list").append("<li><a class='list-a' style='color:#0088CC;' class='video' href = '#' onclick='getFile(" + files[j].id + ")'><i class = 'fa " + fileType[files[j].type] + "'></i><span>" + files[j].title + "." + files[j].type + '</span></a></li>');
        }
    }).error(function (error) {
        console.log(error);
    });
}

function getDescription(description) {
    if (description == null) {
        description = "暫無描述";
    }
    $("#description").text(description);
}

function setListHeight() {
    $("#video-list-panel").height($("#video-body").height() * 0.7);
    $("#file-list-panel").height($("#video-body").height() * 0.3);
}

function getVideoFile() {
    $.ajax({
        url: "./script/php/video/getVideoFile.php",
        type: "POST",
        data: {
            id: id,
        },
    }).done(function (result) {
        var video = videojs("video");
        video.src({
            src: result,
        }); 
        video.on("canplay", function () {
            video.poster(result.replace("m3u8", "jpg"));
        });
    }).error(function (error) {
        console.log("e:" + error);
    });
}

function getFile(id) {
    window.location.href = "./script/php/video/getFile.php?id=" + id;
}

function getVideo(id, folder) {
    $.redirect('./video-play.php', {
        'id': id,
        'folder': folder,
    });
}

function returnToList(folder) {
    $.redirect('./video-list.php', {
        'folder': folder
    });
}