ignore videos

video-play.php

@@ -3,9 +3,7 @@
 
 session_start();
 if (isset($_POST["id"])) {
-
     $id = $_POST["id"];
-    $name = $_POST["name"];
 }
 
 ?>
@@ -55,7 +53,9 @@ if (isset($_POST["id"])) {
     <!-- Icon -->
     <link rel="shortcut icon" href="assets/images/favicon.ico" />
     <style>
-
+        .video {
+            color: #0088CC;
+        }
     </style>
 </head>
 
@@ -195,15 +195,39 @@ if (isset($_POST["id"])) {
             <!-- end: sidebar -->
             <section role="main" class="content-body">
                 <header class="page-header">
-                    <h2>BIM影音網 - <?php echo ($name); ?></h2>
+                    <h2 id="header">BIM影音網 - </h2>
                 </header>
-                <!--<video class="video-js vjs-big-play-centered" controls="" data-setup="{}" height="264" id="my-video" poster="./video/db.png" preload="auto" width="640">
+                <div class="row">
+                    <div class="col-md-9">
+                        <section class="panel" id="video-body">
+                            <!--<video width="100%" controls id="video" controlslist="nodownload" poster="./assets/images/video-loading.gif">
+
+                            </video>-->
+                            <video class="video-js vjs-big-play-centered vjs-16-9" controls="" width="100%" data-setup="{}" id="video" poster="./assets/images/video-loading.gif" preload="auto">
+
+                                <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+                            </video>
+                        </section>
+                    </div>
+                    <div class="col-md-3">
+                        <section class="panel" id="video-list-panel">
+                            <div class="panel-body" style="height: 100%;overflow: auto;">
+                                <span>相關影片</span>
+                                <ul class="nav nav-main" id="video-list"></ul>
+                            </div>
+                        </section>
+                    </div>
+                    <div class="col-md-3">
+                        <section class="panel" id="file-list-panel">
+                            <div class="panel-body" style="height: 100%;overflow: auto;">
+                                <span>參考檔案</span>
+                                <ul class="nav nav-main" id="file-list"></ul>
+                            </div>
+                        </section>
+                    </div>
+                </div>
 
-                    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
-                </video>-->
-                <video width="1600" height="800" controls id="video" controlslist="nodownload" poster="./assets/images/loading-logo2.gif">
 
-                </video>
 
 
         </div>
@@ -211,81 +235,137 @@ if (isset($_POST["id"])) {
     </div>
     <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
     <script>
+        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",
+        }
+
         var id = '<?php echo ($id); ?>';
-        getVideo();
         $(document).ready(function() {
-            //getVideo();
+
+            getVideoInfo();
+            getVideoFile();
             $('#video').bind('contextmenu', function() {
                 return false;
             });
-
+            setListHeight();
+        });
+        $(window).resize(function() {
+            setListHeight();
+        });
+        $(".sidebar-toggle").click(function() {
+            setTimeout(function() {
+                setListHeight();
+            }, 10);
         });
 
-        function getVideo() {
+        function getVideoInfo() {
+            $.ajax({
+                url: "./script/php/video/getInfo.php",
+                type: "POST",
+                data: {
+                    id: id,
+                },
+                dataType: "json"
+            }).done(function(result) {
+                $("#header").append(result[0].title);
+                getVideoList(result[0].dir_name);
+            }).error(function(error) {
+                console.log(error);
+            });
+        }
 
-            /*$.ajax({
-                url: "./video/read.php",
+        function getVideoList(dir) {
+            $.ajax({
+                url: "./script/php/video/getList.php",
                 type: "POST",
                 data: {
-                    //video: name
+                    dir: dir,
                 },
-            }).done(function(data) {
-                objectURL = dataURLtoBlob('data:image/jpeg;base64,' + data);
-                $('#img').attr('src', objectURL);
-                console.log(objectURL);
-            }).error(function() {
+                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].id == id)
+                        $("#video-list").append("<li><a style='color:#0088CC;background-color:#21262d' href = '#' onclick='getVideo(" + videos[j].id + ")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
+                    else
+                        $("#video-list").append("<li><a style='color:#0088CC;' href = '#' onclick='getVideo(" + videos[j].id + ")'><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 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>');
+                }
 
-            });*/
 
-            //创建XMLHttpRequest对象
+            }).error(function(error) {
+                console.log(error);
+            });
+        }
+
+        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/access2.php",
+                type: "POST",
+                data: {
+                    id: id,
+                },
+                //dataType: "json"
+            }).done(function(result) {
+                console.log("done:");
+                console.log(result);
+                var video = videojs("video");
+                video.src({
+                    src: result,
+                });
+                video.poster = result
+
+            }).error(function(error) {
+                console.log("e:" + error);
+            });
+        }
+
+        /*function getVideoFile() {
             var xhr = new XMLHttpRequest();
-            var url = "./script/php/video/access.php"; //服务端地址
-            //配置请求方式、请求地址以及是否同步
+            var url = "./script/php/video/access.php";
             xhr.open('POST', url, true);
-            //设置请求结果类型为blob
             xhr.responseType = 'blob';
-            //请求成功回调函数
             xhr.onload = function(e) {
-                if (this.status == 200) { //请求成功
+                if (this.status == 200) {
                     console.log("請求成功");
                     var video = document.getElementById("video");
-
-                    //获取blob对象地址，并把值赋给容器
-
                     video.src = window.URL.createObjectURL(this.response);
-                    //video.src("./video/1.mp4");
-                    //video.src = window.URL.createObjectURL(this.response);
                     video.removeAttribute("poster");
-                    //video.play();
                     video.onload = function(e) {
                         window.URL.revokeObjectURL(video.src);
-
                     };
-
                 }
             };
             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-            xhr.send("video=" + id); //传递参数
-        }
-        var video = document.getElementById("video");
-        video.addEventListener("playing", () => {
-            console.log("Playing event triggered");
-            //window.URL.revokeObjectURL(video.src);
-        });
-        /*function dataURLtoBlob(dataurl) {
-            var arr = dataurl.split(',');
-            var mime = arr[0].match(/:(.*?);/);
-            var bstr = atob(arr[1]);
-            var n = bstr.length;
-            var u8arr = new Uint8Array(n);
-            var mime = mime[1];
-            while (n--) {
-                u8arr[n] = bstr.charCodeAt(n);
-            }
-            return window.URL.createObjectURL(new Blob([u8arr], {
-                type: mime
-            }));
+            xhr.send("video=" + id);
         }*/
+
+        function getFile(id) {
+            window.location.href = "./script/php/video/getFile.php?id=" + id;
+        }
+
+        function getVideo(id) {
+            $.redirect('./video-play.php', {
+                'id': id
+            });
+        }
     </script>
     <!-- Vendor -->
     <script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>