127 lines
3.1 KiB
JavaScript
127 lines
3.1 KiB
JavaScript
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);
|
|
});
|
|
} |