首先你要有nodejs環(huán)境和會使用npm,不會自行Google或百度。(相關(guān)推薦:Node.js視頻教程)
ok!開始吧!
第一步 用nodejs編寫后臺:
1.新建項(xiàng)目
2.創(chuàng)建static文件夾(可自行更改)
3.static文件夾下創(chuàng)建videos文件夾(可自行更改)
4.在項(xiàng)目目錄創(chuàng)建 app.js 內(nèi)部代碼如下
var http = require('http');var fs = require('fs');var rd = require('rd');var express = require('express');var app = express(); app.use("/static", express.static(dirname + '/static'));//引入靜態(tài)文件夾var vdo_path = dirname + "\\static\\videos\\";//視頻文件夾路徑(可自行更改)var vdo_info_ls = [];//獲取到的文件信息集function getFileInfo(path) {//遍歷文件夾 try { var files = rd.readSync(path);//獲取目錄下所有文件和文件夾 for (var i in files) {//循環(huán)遍歷 if (!fs.lstatSync(files[i]).isDirectory()) {//判斷是否為文件 if (files[i].toLowerCase().split(".mp4").reverse()[0].length== 0) {//判斷是否為MP4格式文件(這里默認(rèn)以MP4為例 其他格式大家自行過濾) vdo_info_ls[vdo_info_ls.length]={ name: files[i].split("\\").reverse()[0].replace(".mp4", "").replace(".MP4", ""),//獲取文件名 url: (vdo_path.replace(dirname, "")+ files[i].replace(vdo_path, "")).replace("\\", "/"), //獲取文件的web路徑 mtime: fs.statSync(files[i]).mtime//修改時(shí)間作為發(fā)布時(shí)間 }//添加信息到文件信息集 } } } } catch (e) { console.log(e) } }function reGetFileInfos() {//這里是為了大家以后寫后臺進(jìn)行文件刷新時(shí)使用 vdo_info_ls = [];//初始化集合 getFileInfo(vdo_path); //遍歷文件夾 vdo_info_ls.sort(function (a, b) {//時(shí)間排序 return Date.parse(b.ctime) - Date.parse(a.ctime);//時(shí)間正序(不過這個(gè)方法好像只能對月日起效 對年好像不起作用) }); } var page_count = 20;//分頁條數(shù)app.get('/getvdojson', function (req, res) { var ret = [];//返回的分頁json初始化 if (req.query.page) {//判斷是否有g(shù)et參數(shù)page if (parseInt(req.query.page) >= 0) {// for (var i = 0; i < page_count; i++) {//遍歷獲取 ret[ret.length] = vdo_info_ls[parseInt(req.query.page) * page_count + i]; } } } res.json(ret);//返回json}); // 創(chuàng)建服務(wù)端http.createServer(app).listen('5000', function () { reGetFileInfos();//初始化文件信息集 console.log('啟動(dòng)服務(wù)器完成'); });
寫入代碼后運(yùn)行。
瀏覽器訪問http://127.0.0.1:5000/getvdojson?page=0 查看效果
改變url的page參數(shù)查看效果。
如果運(yùn)行正常頁面會返回json。(如:[{“name”:”一分鐘學(xué)唱《loser》…..”mtime”:”2016-07-27T11:11:28.501Z”}])
第二步 編寫網(wǎng)站前臺主頁面:
1.添加以下代碼到app.js
app.get('/', function (req, res) { res.sendFile(dirname + "\\" + "index.html"); });
2.static文件夾下創(chuàng)建img,js和css文件夾分別存放img,js和css文件
3.在項(xiàng)目下創(chuàng)建index.html寫入以下代碼
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>小視頻</title> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/minigrid.js"></script><!-- 輕量級瀑布流插件 具體可搜索minigrid了解 --> <style> /*全局樣式*/ * { margin: 0; padding: 0; } a { text-decoration: none; } body { line-height: 1; background: #FFF; } body { font-family: "Microsoft Yahei"; background: #f4f4f4; min-width: 1000px; height: 100%; } /*主體居中*/ .container { width: 98%; position: relative; margin-bottom: 20px; margin: 0 auto; } #photo-box .photo { display: block; /*float: left;*/ width: 225px; background-color: #fff; overflow: hidden; position: absolute; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border: 1px solid #e2e2e2; } #photo-box .photo .content { margin: 0 10px ; font-size: 14px; color: #777; line-height: 20px; word-break: break-all; } /*顯示加載*/ #load-over{ width: 95%; margin: 0 auto; border-bottom: 1px #ccc solid; border-top: 1px #ccc solid; padding: 20px 0px; text-align: center; margin-bottom: 30px; color: #999; } </style></head><body> <!--"photo-box"為瀑布流 圖片容器--> <div id="photo-box" class="container"> <!--"photo"顯示視頻縮略圖與圖片信息--> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(2)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(3)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(4)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(5)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(6)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(7)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(8)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(9)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(10)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(11)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(12)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(13)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> </div> <div id="load-over" style=""> 加載中... </div> <script> minigrid('#photo-box', '.photo', 20, null, function() { //更新后回調(diào) });//瀑布流插件初始化 window.addEventListener('resize', function() {//窗口大小改變自動(dòng)排版 minigrid('#photo-box', '.photo'); }); </script></body></html>
訪問http://127.0.0.1:5000/ 查看效果
效果示例:
Paste_Image.png
第三步 前后臺結(jié)合:
1.修改index.html為以下代碼(請注意修改變化)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>小視頻</title> <script src="/static/js/jquery-2.1.4.min.js"></script> <script src="/static/js/minigrid.js"></script> <style> /*全局樣式*/ * { margin: 0; padding: 0; } a { text-decoration: none; } body { line-height: 1; background: #FFF; } body { font-family: "Microsoft Yahei"; background: #f4f4f4; min-width: 1000px; height: 100%; } /*主體居中*/ .container { width: 98%; position: relative; margin-bottom: 20px; margin: 0 auto; } #photo-box .photo { display: block; /*float: left;*/ width: 225px; background-color: #fff; overflow: hidden; position: absolute; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border: 1px solid #e2e2e2; } #photo-box .photo .content { margin: 0 10px; font-size: 14px; color: #777; line-height: 20px; word-break: break-all; } /*顯示加載*/ #load-over { width: 95%; margin: 0 auto; border-bottom: 1px #ccc solid; border-top: 1px #ccc solid; padding: 20px 0px; text-align: center; margin-bottom: 30px; color: #999; } </style> <script> //--獲取視頻縮略圖-- function vload(obj) { $(obj).removeAttr("poster"); var vimg = $("<img/>",{width:"100%"})[0]; captureImage(obj, vimg); $(obj).after(vimg); obj.remove(); minigrid('#photo-box', '.photo'); }; var scale = 0.8; //縮放 function captureImage(video, output) { //截圖 try { var videocanvas = $("<canvas/>")[0]; videocanvas.width = video.videoWidth * scale; videocanvas.height = video.videoHeight * scale; videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height); output.src = videocanvas.toDataURL("image/png"); delete videocanvas; } catch(e) { output.src = "/static/img/status.gif"; //--status.gif為加載動(dòng)畫 } }; </script></head><body> <!--"photo-box"為瀑布流 圖片容器--> <div id="photo-box" class="container"> <!--"photo"顯示視頻縮略圖與圖片信息--> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(14)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> </div> <div id="load-over" style=""> 加載中... </div> <script> minigrid('#photo-box', '.photo', 20, null, function() { //更新后回調(diào) });//瀑布流插件初始化 window.addEventListener('resize', function() {//窗口大小改變自動(dòng)排版 minigrid('#photo-box', '.photo'); }); function b_load(page){ $("#load-over").text("加載..."); $.getJSON("/getvdojson?page=" + page, function(data) { if(data.length > 0) { for(let i in data) { if(data[i]==null){ $("#load-over").text("加載完畢"); continue; } $("#photo-box").append( $("<a/>", { class: "photo", href:"javascript:void(0)" }) .append($("<video/>", { src: data[i].url , preload: "metadata", onloadeddata:'vload(this)',poster:"/static/img/status.gif",width: "100%" })) .append($("<div/>", { class: "content" }).html(data[i].name) ) .append($("<input/>",{type:"datetime-local",value:(data[i].mtime).split('.')[0],readonly:"readonly" }).css({width:"100%", border:"none", color: "#777", "padding-left": "10px", "padding-bottom": "10px" })) ); } minigrid('#photo-box', '.photo'); } }); } page = 0; window.onscroll = function() { // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var tops = $(document).scrollTop(); //獲取滾動(dòng)條的位置 var sctop = $(document).height() - $(window).height(); if(tops >= sctop) //成立說明滾動(dòng)條已在最底部 { page = page + 1; //傳遞頁碼 b_load(page); } }; b_load(page); page=page+1; b_load(page); </script></body></html>
[為什么不直接顯示視頻而偏偏搞個(gè)截圖?--因?yàn)楸救饲皩戇^類似小網(wǎng)站,發(fā)現(xiàn)如果后臺插件獲取視頻截圖麻煩,但直接顯示視頻也就是video標(biāo)簽的話會出現(xiàn)當(dāng)加載大量視頻時(shí),出現(xiàn)卡頓,導(dǎo)致部分視頻無法顯示縮略圖和無法播放的現(xiàn)象。]
運(yùn)行項(xiàng)目重新訪問http://127.0.0.1:5000/ 查看效果
第四步 添加點(diǎn)擊播放功能:
1.修改index.html為以下代碼(請注意修改變化)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>小視頻</title> <script src="/static/js/jquery-2.1.4.min.js"></script> <script src="/static/js/minigrid.js"></script> <style> /*全局樣式*/ * { margin: 0; padding: 0; } a { text-decoration: none; } body { line-height: 1; background: #FFF; } body { font-family: "Microsoft Yahei"; background: #f4f4f4; min-width: 1000px; height: 100%; } /*主體居中*/ .container { width: 98%; position: relative; margin-bottom: 20px; margin: 0 auto; } #photo-box .photo { display: block; /*float: left;*/ width: 225px; background-color: #fff; overflow: hidden; position: absolute; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border: 1px solid #e2e2e2; } #photo-box .photo .content { margin: 0 10px; font-size: 14px; color: #777; line-height: 20px; word-break: break-all; } /*顯示加載*/ #load-over { width: 95%; margin: 0 auto; border-bottom: 1px #ccc solid; border-top: 1px #ccc solid; padding: 20px 0px; text-align: center; margin-bottom: 30px; color: #999; } /*彈出播放頁面樣式*/ .mask { z-index: 999; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(229, 229, 229, .95); overflow: auto; padding-top: 30px; } .mask .close-layer { width: 56px; height: 56px; position: fixed; right: 14px; top: 0; cursor: pointer; z-index: 99995; } .mask .close-layer i { background: url(/static/img/btn_close_layer.png) 0 0 no-repeat; width: 36px; height: 36px; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -18px; } .pin-view-wrapper { width: 84%; margin: 0 auto; position: relative; } .pin-view-wrapper>.main-part, .pin-view-wrapper>.side-part { background-color: #fff; display: block; width: 100%; } .pin-view-wrapper>.main-part {} .pin-view-wrapper>.side-part { margin-bottom: 15px; } ul { list-style: none outside none; padding-left: 0; margin: 0; } .main-part .item img { /*width: 100%;*/ display: block; margin: 0 auto; max-width: 100%; } .main-part .item {} .lSSlideOuter .lSPager.lSGallery img { display: block; height: 100%; max-width: 100px; width: 100%; max-height: 100px; } .clearfix video { width: 640px; margin: 0 auto; height: 480px; display: block; background-color: #000; } </style> <script> //--獲取視頻縮略圖-- function vload(obj) { $(obj).removeAttr("poster"); var vimg = $("<img/>",{width:"100%"})[0]; captureImage(obj, vimg); $(obj).after(vimg); obj.remove(); minigrid('#photo-box', '.photo'); }; var scale = 0.8; //縮放 function captureImage(video, output) { //截圖 try { var videocanvas = $("<canvas/>")[0]; videocanvas.width = video.videoWidth * scale; videocanvas.height = video.videoHeight * scale; videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height); output.src = videocanvas.toDataURL("image/png"); delete videocanvas; } catch(e) { output.src = "/static/img/status.gif"; //--status.gif為加載動(dòng)畫 } }; </script></head><body> <!--"photo-box"為瀑布流 圖片容器--> <div id="photo-box" class="container"> <!--"photo"顯示視頻縮略圖與圖片信息--> <a class="photo" target="_blank" href="#"> [站外圖片上傳中……(15)] <div class="content"> 歡迎來到XXX(公告或廣告位) </div> </a> </div> <div id="load-over" style=""> 加載中... </div> <!--遮罩層--> <div id="vdo-mask" class="mask" hidden="hidden" style="display: none;"> <div class="close-layer" onclick="$(this).parent().fadeOut(300);$('#vdo-tBox').attr('src','');$('.side-part').html('')"> <i></i> </div> <div class="pin-view-wrapper"> <div class="side-part" style="text-align: center;padding: 10px 10px;font-size: 16px;font-weight: 600; color: #777;"></div> <div class="main-part" style="padding: 10px 10px;"> <div class="item"> <div class="clearfix"> <video id="vdo-tBox" style="height: 600px; width: 100%;" controls="controls"> </video> </div> </div> </div> </div> </div> <script> minigrid('#photo-box', '.photo', 20, null, function() { //更新后回調(diào) });//瀑布流插件初始化 window.addEventListener('resize', function() {//窗口大小改變自動(dòng)排版 minigrid('#photo-box', '.photo'); }); function b_load(page){ $("#load-over").text("加載..."); $.getJSON("/getvdojson?page=" + page, function(data) { if(data.length > 0) { for(let i in data) { if(data[i]==null){ $("#load-over").text("加載完畢"); continue; } $("#photo-box").append( $("<a/>", { class: "photo", href:"javascript:void(0)", onclick:"$('#vdo-mask').show(100); $('#vdo-tBox').attr('src','"+data[i].url+"');$('.side-part').html('"+data[i].name+" <small>(發(fā)布:"+(data[i].mtime.split('.')[0]).replace("T"," ").replace("/","-")+")</small>')" }) .append($("<video/>", { src: data[i].url , preload: "metadata", onloadeddata:'vload(this)',poster:"/static/img/status.gif",width: "100%" })) .append($("<div/>", { class: "content" }).html(data[i].name) ) .append($("<input/>",{type:"datetime-local",value:(data[i].mtime).split('.')[0],readonly:"readonly" }).css({width:"100%", border:"none", color: "#777", "padding-left": "10px", "padding-bottom": "10px" })) ); } minigrid('#photo-box', '.photo'); } }); } page = 0; window.onscroll = function() { // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var tops = $(document).scrollTop(); //獲取滾動(dòng)條的位置 var sctop = $(document).height() - $(window).height(); if(tops >= sctop) //成立說明滾動(dòng)條已在最底部 { page = page + 1; //傳遞頁碼 b_load(page); } }; //默認(rèn)先加載 b_load(page); page=page+1; b_load(page); //播放時(shí)阻止 滾動(dòng)條 上下滾動(dòng) 防止?jié)L動(dòng)加載 $.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; if(document.mozHidden !== undefined) { eventType = 'DOMMouseScroll'; } $(this).on(eventType, function(event) { // 一些數(shù)據(jù) var scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = this.clientHeight; var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); if((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE瀏覽器下滾動(dòng)會跨越邊界直接影響父級滾動(dòng),因此,臨界時(shí)候手動(dòng)邊界滾動(dòng)定位 this.scrollTop = delta > 0 ? 0 : scrollHeight; // 向上滾 || 向下滾 event.preventDefault(); } }); }); }; $('.mask').scrollUnique();//事件綁定</script></body></html>
相信看了本文案例你已經(jīng)掌握了方法,更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章!
相關(guān)閱讀:
ES6的拓展運(yùn)算符詳解
ES6的變量的作用域與聲明詳解
commonJS與es6規(guī)范的引入導(dǎo)出
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com