155 lines
3.8 KiB
JavaScript
155 lines
3.8 KiB
JavaScript
let pageNum = "";
|
|
|
|
function checkAjax() {
|
|
if (location.search.length == 0) {
|
|
getVideoList();
|
|
} else {
|
|
getRecommendFeeds();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取和 photoId 相似的推荐数据
|
|
*/
|
|
function getRecommendFeeds() {
|
|
Http("/RecommendFeeds", {
|
|
photoId: location.search.split("=")[1]
|
|
}, res => {
|
|
let { list } = res;
|
|
console.log(list);
|
|
list.forEach(function (val, index) {
|
|
RenderList(val);
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 发送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="pid">${val.id}</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();
|
|
console.log("scrollTop: ", scrollTop);
|
|
console.log("windowHeight: ", windowHeight);
|
|
console.log("scrollHeight: ", scrollHeight);
|
|
console.log("scrollTop + windowHeight: ", scrollTop + windowHeight);
|
|
if (Number((scrollTop + windowHeight).toFixed()) == scrollHeight) {
|
|
console.log("到底了,发起请求")
|
|
checkAjax()
|
|
}
|
|
});
|
|
|
|
// 关闭视频播放弹窗
|
|
$(".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:8090/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);
|
|
});
|
|
}
|
|
|
|
checkAjax(); |