videodetails.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
  1. $(document).ready(function () {
  2. $('.logo').on('click', function () {
  3. window.location.href = "https://www.bibidd.com";
  4. })
  5. $('.quanpinghei').hide();
  6. $('.back').on('click', function () {
  7. history.back(-1);
  8. })
  9. let url = window.location.search;
  10. var theRequest = new Object();
  11. if (url.indexOf("?") != -1) {
  12. var str = url.substr(1);
  13. strs = str.split("&");
  14. for (var i = 0; i < strs.length; i++) {
  15. theRequest[strs[i].split("=")[0]] = unescape(
  16. decodeURIComponent(strs[i].split("=")[1])
  17. );
  18. }
  19. }
  20. console.log(theRequest);
  21. $('.videoName').text(theRequest.videoname);
  22. var username = localStorage.getItem('username');
  23. var uid = localStorage.getItem("uid");
  24. if (uid) {
  25. $("#register").text("My Collection");
  26. $("#login").text("Log out");
  27. $("#login").css("backgroundColor", "#D6565A");
  28. } else {
  29. $("#register").text("Sign up");
  30. $("#login").text("Login");
  31. $("#login").css("backgroundColor", "#CE5C2A");
  32. }
  33. // 获取视频id
  34. var videoid = theRequest.videoid;
  35. // 获取点赞数量
  36. var fabulous = theRequest.fabulous;
  37. $('.fabulous').find("p").eq(0).text(fabulous);
  38. // 获取视频数据
  39. function getData() {
  40. $.ajax({
  41. type: 'post',
  42. url: 'https://www.bibidd.com/bibidd/Media/video_detail',
  43. dataType: "json",
  44. data: {
  45. video_id: videoid
  46. },
  47. success: function (res) {
  48. },
  49. complete: function (res) {
  50. let videoSrc = res.responseJSON.data;
  51. $('iframe').attr('src', videoSrc);
  52. }
  53. })
  54. }
  55. // 调用 获取视频数据 接口
  56. getData();
  57. // 判断该视频是否被收藏
  58. var collectionStatus;
  59. function collectionData() {
  60. $.ajax({
  61. type: 'post',
  62. url: 'https://www.bibidd.com/bibidd/Media/yn_shoucang',
  63. dataType: "json",
  64. data: {
  65. type: 'video',
  66. cid: videoid,
  67. uid: uid
  68. },
  69. success: function (res) {
  70. },
  71. complete: function (res) {
  72. let collectionData = res.responseJSON.message;
  73. if (collectionData === 'ok') {
  74. // 已经被收藏
  75. $('.collection img').attr('src', '/Public/bibidd/images/xingsel.png');
  76. $('.collection').find("p").eq(0).text('Favorite');
  77. collectionStatus = true;
  78. } else {
  79. $('.collection img').attr('src', '/Public/bibidd/images/xing.png');
  80. $('.collection').find("p").eq(0).text('Not collected');
  81. collectionStatus = false;
  82. }
  83. }
  84. })
  85. }
  86. if (uid) {
  87. collectionData();
  88. $('.userName').text(username);
  89. } else {
  90. $('.collection').find("p").eq(0).text('Not collected');
  91. $('.userName').text('Please login');
  92. }
  93. // 获取评论数据
  94. function commentData() {
  95. $.ajax({
  96. type: 'post',
  97. url: 'https://www.bibidd.com/bibidd/Media/comments_list',
  98. dataType: "json",
  99. data: {
  100. type: 'video',
  101. cid: videoid
  102. },
  103. success: function (res) {
  104. },
  105. complete: function (res) {
  106. let commentData = res.responseJSON.data;
  107. let commentListHtml = '';
  108. $.each(commentData, function (index, data) {
  109. commentListHtml += '<div class="commentContent">';
  110. commentListHtml += ' <div class="commentUser">';
  111. commentListHtml += ' <img class="commentUserImg" src="/Public/bibidd/images/user.png" alt="">';
  112. commentListHtml += ' <p class="commentUserName">' + data.username + '</p>';
  113. commentListHtml += ' <p class="commentTime">' + judgeDate(Number(data.time) * 1000) + '</p>';
  114. commentListHtml += ' </div>';
  115. commentListHtml += ' <div class="commentText">' + data.content + '</div>';
  116. commentListHtml += '</div>';
  117. })
  118. $('.commentList').html(commentListHtml);
  119. }
  120. })
  121. }
  122. commentData();
  123. // 评论
  124. var commentStatus = true;
  125. $('.sendBtn').on('click', function () {
  126. let commentInputVal = $('#commentInput').val();
  127. if (uid) {
  128. if (commentInputVal && uid) {
  129. if (commentStatus) {
  130. // 添加评论内容
  131. let commentListHtml = '';
  132. commentListHtml += '<div class="commentContent">';
  133. commentListHtml += ' <div class="commentUser">';
  134. commentListHtml += ' <img class="commentUserImg" src="/Public/bibidd/images/user.png" alt="">';
  135. commentListHtml += ' <p class="commentUserName">' + username + '</p>';
  136. commentListHtml += ' <p class="commentTime">刚刚</p>';
  137. commentListHtml += ' </div>';
  138. commentListHtml += ' <div class="commentText">' + commentInputVal + '</div>';
  139. commentListHtml += '</div>';
  140. $('.commentList').append(commentListHtml);
  141. $('#commentInput').val('');
  142. commentStatus = false;
  143. // 添加评论到数据库中
  144. $.ajax({
  145. type: 'post',
  146. url: 'https://www.bibidd.com/bibidd/Media/add_comments',
  147. dataType: "json",
  148. data: {
  149. type: 'video',
  150. cid: theRequest.videoid,
  151. uid: uid,
  152. username: username,
  153. content: commentInputVal
  154. },
  155. success: function (res) {
  156. },
  157. complete: function () {
  158. commentStatus = true;
  159. }
  160. })
  161. }
  162. }
  163. } else if (commentInputVal && !uid) {
  164. $('.loginBox').show();
  165. }
  166. })
  167. // 点赞
  168. var fabulousStatus = true;
  169. $('.fabulous').on('click', function () {
  170. $('.fabulous img').attr('src', '/Public/bibidd/images/loading.gif');
  171. setTimeout(() => {
  172. $.ajax({
  173. type: 'post',
  174. url: 'https://www.bibidd.com/bibidd/Media/dianzan_img_video',
  175. dataType: "json",
  176. data: {
  177. type: 'video',
  178. cid: videoid,
  179. uid: uid
  180. },
  181. success: function (res) {
  182. let fabulous = $('.fabulous').find("p").eq(0).text();
  183. $('.fabulous').find("p").eq(0).text(Number(fabulous) + 1);
  184. $('.fabulous img').attr('src', '/Public/bibidd/images/zan.png');
  185. }
  186. })
  187. }, 2000);
  188. })
  189. var collectionChange = false;
  190. // 收藏
  191. $('.collection').on('click', function () {
  192. if (uid) {
  193. if (collectionStatus) {
  194. $('.collection img').attr('src', '/Public/bibidd/images/xing.png');
  195. $('.collection').find("p").eq(0).text('Not collected');
  196. collectionclose();
  197. } else {
  198. $('.collection img').attr('src', '/Public/bibidd/images/xingsel.png');
  199. $('.collection').find("p").eq(0).text('Favorite');
  200. collectionAdd();
  201. }
  202. } else {
  203. // 弹窗提示去登录
  204. $('.loginBox').show();
  205. }
  206. })
  207. $('.guanbi').on('click', function () {
  208. $('.loginBox').hide();
  209. })
  210. // 查看我的收藏
  211. $('#register').on('click', function () {
  212. if ($(this).text() === 'My Collection') {
  213. $(location).attr('href', 'collection.html?status=' + 1);
  214. } else {
  215. // 注册
  216. $(location).attr('href', 'register.html?status=' + 1);
  217. }
  218. $('.loginBox').hide();
  219. })
  220. // 登录/退出登录
  221. $('#login').on('click', function () {
  222. if ($(this).text() === 'Log out') {
  223. // 退出登录
  224. localStorage.removeItem('uid');
  225. location.reload();
  226. } else {
  227. // 登录
  228. $(location).attr('href', 'login.html?status=' + 1);
  229. }
  230. $('.loginBox').hide();
  231. })
  232. // 添加收藏
  233. function collectionAdd() {
  234. $.ajax({
  235. type: 'post',
  236. url: 'https://www.bibidd.com/bibidd/Media/add_to_shoucang',
  237. dataType: "json",
  238. data: {
  239. type: 'video',
  240. cid: videoid,
  241. uid: uid
  242. },
  243. success: function (res) {
  244. },
  245. complete: function (res) {
  246. let collectionData = res.responseJSON.message;
  247. if (collectionData === 'ok') {
  248. // 已经被收藏
  249. $('.collection img').attr('src', '/Public/bibidd/images/xingsel.png');
  250. $('.collection').find("p").eq(0).text('Favorite');
  251. collectionStatus = true;
  252. } else {
  253. $('.collection img').attr('src', '/Public/bibidd/images/xing.png');
  254. $('.collection').find("p").eq(0).text('Not collected');
  255. collectionStatus = false;
  256. tip('Please try again later');
  257. }
  258. }
  259. })
  260. }
  261. // 取消收藏
  262. function collectionclose() {
  263. $.ajax({
  264. type: 'post',
  265. url: 'https://www.bibidd.com/bibidd/Media/quxiao_shoucang',
  266. dataType: "json",
  267. data: {
  268. type: 'video',
  269. cid: videoid,
  270. uid: uid
  271. },
  272. success: function (res) {
  273. },
  274. complete: function (res) {
  275. let collectionData = res.responseJSON.message;
  276. if (collectionData === 'ok') {
  277. // 已经取消收藏
  278. $('.collection img').attr('src', '/Public/bibidd/images/xing.png');
  279. $('.collection').find("p").eq(0).text('Not collected');
  280. collectionStatus = false;
  281. } else {
  282. $('.collection img').attr('src', '/Public/bibidd/images/xingsel.png');
  283. $('.collection').find("p").eq(0).text('Favorite');
  284. $('.collection').find("p").eq(0).text('Favorite');
  285. collectionStatus = true;
  286. tip('Please try again later');
  287. }
  288. }
  289. })
  290. }
  291. // 获取推荐视频
  292. function getTuiJianVideoData() {
  293. $.ajax({
  294. type: 'post',
  295. url: 'https://www.bibidd.com/bibidd/Media/tuijian_shipin',
  296. dataType: "json",
  297. data: {
  298. cid: videoid,
  299. },
  300. success: function (res) {
  301. },
  302. complete: function (res) {
  303. let dataArray = res.responseJSON.data;
  304. let videoHtml = '';
  305. $.each(dataArray, function (index, data) {
  306. videoHtml += '<div class="videoContent">';
  307. videoHtml +=
  308. '<div class="lazy videoPhoto" data-original="' +
  309. data.top_img +
  310. '"></div>';
  311. videoHtml += ' <div class="videoTitleAndTime">';
  312. videoHtml += ' <div class="videoTitle">' + data.title + "</div>";
  313. videoHtml += ' <div class="videoTime">' + videoTime(data.time_chuo) + '</div>';
  314. videoHtml += ' </div>';
  315. videoHtml += "</div>";
  316. })
  317. $('.video').html(videoHtml);
  318. var loadingUrl = "/Public/bibidd/images/loading.png";
  319. $(".lazy").lazyload({
  320. effect: 'show',
  321. placeholder: loadingUrl,
  322. failurelimit: 10,
  323. skip_invisible: false,
  324. });
  325. // 查看视频详情
  326. $(".videoContent").on("click", function () {
  327. let looks = $(this).find("#looks").eq(0).text();
  328. $(this).find("#looks").eq(0).text(Number(looks) + 1);
  329. $(location).attr("href", "videodetails.html?videoid=" + dataArray[$(this).index()].id + "&fabulous=" + dataArray[$(this).index()].thumbs_up + "&favorite=" + dataArray[$(this).index()].favorite + '?status=' + 1);
  330. });
  331. }
  332. })
  333. }
  334. getTuiJianVideoData();
  335. // 时间戳转换
  336. function formatDateTime(inputTime) {
  337. var timeStr;
  338. var date = new Date(inputTime);
  339. var y = date.getFullYear();
  340. var m = date.getMonth() + 1;
  341. m = m < 10 ? "0" + m : m;
  342. var d = date.getDate();
  343. d = d < 10 ? "0" + d : d;
  344. var h = date.getHours();
  345. h = h < 10 ? "0" + h : h;
  346. var minute = date.getMinutes();
  347. var second = date.getSeconds();
  348. minute = minute < 10 ? "0" + minute : minute;
  349. second = second < 10 ? "0" + second : second;
  350. let date1 = new Date(inputTime).getTime(); //开始时间
  351. let date2 = new Date().getTime(); //结束时间
  352. let date3 = Math.floor(date2 - date1);
  353. //计算出相差天数
  354. let days = Math.floor(date3 / (24 * 3600 * 1000));
  355. //计算出小时数
  356. let leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
  357. let hours = Math.floor(leave1 / (3600 * 1000));
  358. //计算相差分钟数
  359. let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
  360. let minutes = Math.floor(leave2 / (60 * 1000));
  361. //计算相差秒数
  362. let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
  363. let seconds = Math.round(leave3 / 1000);
  364. if (days === 0 && hours === 0 && minutes <= 5) {
  365. // 超过一分钟的显示具体时间,精确到分钟,如:15分钟前。
  366. // timeStr = minutes < 10 ? "0" + minutes + '分钟前' : minutes + '分钟前';
  367. timeStr = "just";
  368. } else if (days === 0 && hours < 1 && minutes >= 5) {
  369. // 超过一分钟的显示具体时间,精确到分钟,如:15分钟前。
  370. // timeStr = hours < 10 ? "0" + hours + '小时前' : hours + '小时前';
  371. timeStr = "Within 1 hour";
  372. } else if (days === 0 && hours < 24 && hours >= 1) {
  373. // 超过一分钟的显示具体时间,精确到分钟,如:15分钟前。
  374. // timeStr = hours < 10 ? "0" + hours + '小时前' : hours + '小时前';
  375. timeStr = h + ":" + minute;
  376. }
  377. return timeStr;
  378. }
  379. Date.prototype.format = function (fmt) {
  380. var o = {
  381. "M+": this.getMonth() + 1, //月份
  382. "d+": this.getDate(), //日
  383. "h+": this.getHours(), //小时
  384. "m+": this.getMinutes(), //分
  385. "s+": this.getSeconds(), //秒
  386. "q+": Math.floor((this.getMonth() + 3) / 3), //季度
  387. "S": this.getMilliseconds() //毫秒
  388. };
  389. if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  390. for (var k in o)
  391. if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  392. return fmt;
  393. };
  394. function judgeDate(timestamp) { // 判断是否是今天还是昨天,在项目中用于说说时的时间显示
  395. //昨天的时间
  396. var day1 = new Date();
  397. day1.setDate(day1.getDate() - 1);
  398. var yesterday = day1.format("yyyy-MM-dd");
  399. //今天的时间
  400. var day2 = new Date();
  401. day2.setTime(day2.getTime());
  402. var today = day2.format("yyyy-MM-dd");
  403. if (timestamp) {
  404. var date = new Date(timestamp);
  405. } else {
  406. var date = new Date();
  407. }
  408. Y = date.getFullYear(),
  409. m = date.getMonth() + 1,
  410. d = date.getDate(),
  411. H = date.getHours(),
  412. i = date.getMinutes();
  413. if (m < 10) {
  414. m = '0' + m;
  415. }
  416. if (d < 10) {
  417. d = '0' + d;
  418. }
  419. if (H < 10) {
  420. H = '0' + H;
  421. }
  422. if (i < 10) {
  423. i = '0' + i;
  424. }
  425. var t = Y + '-' + m + '-' + d + ' ' + H + ':' + i;
  426. if (t.split(" ")[0] == today) {
  427. // return "今天"+t.split(" ")[1];
  428. return formatDateTime(timestamp);
  429. return H + ':' + i;
  430. } else if (t.split(" ")[0] == yesterday) {
  431. return "yesterday ";
  432. } else {
  433. return m + '-' + d;
  434. }
  435. }
  436. function tip(text) {
  437. $('#tip').show();
  438. $('.tiptext').text(text);
  439. setTimeout(() => {
  440. $('#tip').hide();
  441. }, 1000);
  442. }
  443. function videoTime(time) {
  444. let timeStr = '';
  445. timeStr = Math.floor(time / 60 / 60) + ':' + Math.floor(time / 60) % 60 + ':' + time % 60
  446. return timeStr
  447. }
  448. })