开始整音乐播放器

2020-10-21 18:05:33 +08:00
parent 4e69d01c02
commit d46b1b15cc
20 changed files with 1029 additions and 574 deletions
--- a/web/html/body/nas/music.html
+++ b/web/html/body/nas/music.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>来点Music~</title>
+    <link rel="stylesheet" href="/layui/css/layui.css">
+</head>
+<link href="/css/video-js.min.css" rel="stylesheet">
+<body>
+<div class="layui-layout layui-layout-admin">
+    <div id="header"></div>
+    <div class="layui-body" style="left: 200px;">
+        <div id="side"></div>
+        <div style="margin-left: 5%; margin-top: 5%;">
+            <div>
+                <img src="/assets/defaultPlayImg.jpg" id="img" style="height: 400px; width: 400px"/>
+                <div style="display:inline-block;">
+                    <div>title</div>
+                    <div>by</div>
+                    <div>(0/0)</div>
+                    <video id="my-video" loop='true' class="video-js" controls preload="auto" width="500" height="400"
+                           poster="/assets/defaultPlayImg.jpg" data-setup="{}" autoplay="autoplay">
+                        <source src="/nas/music/play.do?random=true" type="video/ogg">
+                        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a
+                            web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports
+                                HTML5 video</a></p>
+                    </video>
+                </div>
+            </div>
+            <div style="margin-top: 20px;">
+                <div class="layui-col-md6 layui-col-md6">
+                    <button type="button" class="layui-icon layui-icon-play"
+                            style="width: 70px;height: 60px; font-size: 50px;"></button>
+                    <button type="button" class="layui-icon layui-icon-triangle-r"
+                            style="width: 70px;height: 60px; font-size: 50px;"></button>
+                </div>
+            </div>
+        </div>
+
+        <div id="footer"></div>
+    </div>
+</div>
+<script src="/layui/layui.js"></script>
+<script src="/js/jquery-3.2.1.js"></script>
+<script src="/js/video.min.js"></script>
+<script>
+    $.get("/login/check.do", function (data) {
+        let json = JSON.parse(data);
+        if (json.code !== 0) {
+            window.location.href = "/"
+        }
+    })
+    $.ajax({cache: false})
+    $('#header').load("/html/header.html");
+    $('#footer').load("/html/footer.html");
+    $('#side').load("/html/body/nas/side.html");
+    $('#button').click(function () {
+        console.log("123")
+        $.get("/nas/music/image.do?fileName=QzpcXFVzZXJzXFxhZG1pblxcTXVzaWNcXDM0LeWlrui1t%2BOBruODiOODqeODs%2BODmuODg%2BODiC5mbGFj", function (data) {
+            let json = JSON.parse(data)
+            if (json.code === 1) {
+                $('#img').attr("src", "data:image/png;base64," + json.data)
+            } else {
+                layer.msg(json.msg)
+            }
+        })
+    })
+
+</script>
+<style>
+
+</style>
+</body>
+
+</html>