first commit

项目合集/快手/backend/public/javascripts/index.js

@@ -0,0 +1,127 @@
+let pageNum = "";
+
+getVideoList();
+
+/**
+ * 发送ajax请求数据
+ */
+function getVideoList() {
+  Http("/list", { page: pageNum }, res=> {
+    let MMList = res.data;
+    pageNum = MMList.pcursor;
+    MMList.list.forEach(function (val,index) {
+      RenderList(val);
+    })
+  })
+}
+
+function RenderList(val) {
+  $("ul").append(`
+          <li class="list">
+            <div class="back">
+              <div class="zz" style="background: url('${val.thumbnailUrl}'); background-position: center center;"></div>
+              <img src="${val.thumbnailUrl}"/>
+            </div>
+            <div class="list-bottom">
+              <div class="bottom-info">
+                <a target="_blank" title="${val.user.id}" href="https://live.kuaishou.com/profile/${val.user.id}">
+                  <img class="avatar" src="${val.user.avatar}"/>
+                  <span class="title">${val.caption}</span>
+                </a>
+              </div>
+              <div class="action" principalId="${val.user.id}" photoId="${val.id}">
+                <a class="down">下载</a>
+                <a class="play">播放</a>
+              </div>
+            </div>
+          </li>
+  `);
+
+  BindPlayClick();
+  BindDownClick();
+}
+
+// 播放视频
+function BindPlayClick() {
+  document.querySelectorAll(".play").forEach((val,index) =>{
+    val.onclick= function () {
+      Http('/play',{
+        principalId: $(val).parent().attr("principalId"),
+        photoId: $(val).parent().attr("photoId")
+      },url=> {
+        $(".video video").attr("src", url.playUrl);
+        $(".video").slideDown("slow");
+      })
+    }
+  })
+}
+
+// 下载视频
+function BindDownClick() {
+
+  document.querySelectorAll(".down").forEach((val,index) =>{
+    val.onclick= function () {
+      Http('/play',{
+        principalId: $(val).parent().attr("principalId"),
+        photoId: $(val).parent().attr("photoId")
+      },url=> {
+        downMp4( url.playUrl, $(val).parent().attr("photoId"))
+      })
+    }
+  });
+}
+
+
+// 滚动加载数据
+$(window).scroll(function () {
+  var scrollTop = $(this).scrollTop();
+  var scrollHeight = $(document).height();
+  var windowHeight = $(this).height();
+  if (scrollTop + windowHeight == scrollHeight) {
+    getVideoList()
+    console.log("到底了,发起请求")
+  }
+});
+
+// 关闭视频播放弹窗
+$(".close").click(function () {
+  $("video").get(0).pause();
+  $(".video video").attr("src", "");
+  $(".video").slideUp("slow");
+});
+
+// video 父元素被悬浮就开始视频播放
+// 以实现不静音而自动播放
+$(".video").mouseover(function () {
+  $("video").get(0).play()
+});
+
+
+// 发送ajax请求
+function Http(URL, params,callback) {
+  $.ajax({
+    url: `http://127.0.0.1:3000/api${URL}`,
+    type: 'GET',
+    data: params,
+    success: (res)=> {
+      callback(res)
+    }
+  })
+}
+
+// 下载MP4视频
+function downMp4(urls, photoId) {
+  fetch(urls).then(res => res.blob()).then(blob => {
+    const a = document.createElement('a');
+    
+    document.body.appendChild(a);
+    a.style.display = 'none';
+    const url = window.URL.createObjectURL(blob);
+
+    a.href = url;
+    a.download = `bmy-${photoId}.mp4`;
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  });
+}