vue+node 實(shí)現(xiàn)視頻在線播放的實(shí)例代碼
1.node服務(wù)端
數(shù)據(jù)流傳輸,可在線緩存
//獲取參數(shù) var params=urldeal.parse(req.url,true).query const ROOT_PATH = process.cwd();//必須使用絕對路徑,使用相對路徑會(huì)直接下載文件 let path =ROOT_PATH+params.url; let stat = fs.statSync(path); //獲取文件信息 let fileSize = stat.size; let range = req.headers.range; if (range) { //有range頭才使用206狀態(tài)碼 let parts = range.replace(/bytes=/, "").split("-"); let start = parseInt(parts[0], 10); let end = parts[1] ? parseInt(parts[1], 10) : start + 9999999; // end 在最后取值為 fileSize - 1 end = end > fileSize - 1 ? fileSize - 1 : end; let chunksize = (end - start) + 1; let file = fs.createReadStream(path, { start, end }); let head = { 'Content-Range': `bytes ${start}-${end}/${fileSize}`, 'Accept-Ranges': 'bytes', 'Content-Length': chunksize, 'Content-Type': 'video/mp4', }; res.writeHead(206, head); file.pipe(res); //Node中的Server端HTTP response是Writable流 } else { let head = { 'Content-Length': fileSize, 'Content-Type': 'video/mp4', }; res.writeHead(200, head); fs.createReadStream(path).pipe(res); }
2.vue客戶端
1.安裝video-player插件
cnpm install vue-video-player --save
2.組件中引用
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player>
3.調(diào)用的data中的數(shù)據(jù)
data() { return { // 視頻播放 playerOptions: { playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度 autoplay: false, //如果true,瀏覽器準(zhǔn)備好時(shí)開始回放。 muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。 loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始。 preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻(如果瀏覽器支持) language: 'zh-CN', aspectRatio: '16:9', // 將播放器置于流暢模式,并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字(例如"16:9"或"4:3") fluid: true, // 當(dāng)true時(shí),Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應(yīng)其容器。 sources: [{ type: "", //src: require('@/assets/'+this.vurl)//url地址 src: 'http://localhost:10086/videos?url=/public/videos/'+this.vurl, //url地址,請求中需要包含具體的視頻文件名 }], poster: '', //你的封面地址 // width: document.documentElement.clientWidth, notSupportedMessage: '此視頻暫無法播放,請稍后再試', //允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)信息。 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按鈕 } } } },
附錄:vue+flvjs播放直播流FLV,分頁時(shí)如何斷開之前直播流解決辦法
使用flvjs庫同時(shí)播放flv文件,需要分頁發(fā)現(xiàn),之前直播流沒有斷開,很影響性能,網(wǎng)上查閱借鑒下邊代碼實(shí)現(xiàn)斷開上頁直播流
// 銷毀播放器實(shí)例 closePlayer() { if (this.player.length > 0) { this.player.forEach((item) => { item.destroy(true); item.off('ended', function () {}); item.off('error', function () {}); item = null; }); this.player = []; } }, // 初始化播放器 initPlayer(id, url, img) { let doms = document.getElementById(id); doms.innerHTML = ''; this.player.push( new FlvPlayer({ id: id, url: url, poster: img, isLive: true, autoplay: true, volume: id == 'videos0' ? 0.5 : 0, preloadTime: 10, minCachedTime: 5, cors: true, }) ); this.player[this.player.length - 1].on('ended', () => { //事件名稱可以在上述查詢 this.getLivingList(); }); this.player[this.player.length - 1].on('error', () => { //事件名稱可以在上述查詢 this.getLivingList(); }); }, // 翻頁操作 currentChange(e) { this.closePlayer(); this.pageno = e; this.getLivingList(); }, // 獲取直播中的列表 async getLivingList() { let res = await this.$req(api.liveShowers, { ...this.searchForm, pageno: this.pageno - 1, pagesize: this.pagesize, }); console.log(res); if (res.code == 200) { // 獲取到數(shù)據(jù),賦值然后循環(huán)實(shí)例化 res.data.showers.push(res.data.showers[0]); res.data.showers.push(res.data.showers[0]); res.data.showers.push(res.data.showers[0]); res.data.showers.push(res.data.showers[0]); this.livingList = res.data.showers; this.totalP = res.data.total_page - 0; this.totalS = res.data.total_showers; this.isrefresh = false; if (this.livingList.length > 0) { setTimeout(() => { this.livingList.forEach((item, idx) => { let domid = 'videos' + idx; this.initPlayer( domid, item.play_url, this.$store.state.coverTop + item.showcover ); }); }, 400); } else { // 如果返回沒有直播數(shù)據(jù)又不是第一頁。就跳到第一頁再請求一下 if (this.pageno > 1) { this.pageno = 1; this.getLivingList(); } } } },
總結(jié)
到此這篇關(guān)于vue+node 實(shí)現(xiàn)視頻在線播放的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue視頻在線播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程
- vue-video-player視頻播放器使用配置詳解
- vue項(xiàng)目中播放rtmp視頻文件流的方法
- vue實(shí)現(xiàn)移動(dòng)端input上傳視頻、音頻
- vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)
- vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能
- vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
- vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法
- vue視頻播放插件vue-video-player的具體使用方法
- vue vantUI實(shí)現(xiàn)文件(圖片、文檔、視頻、音頻)上傳(多文件)
- Vue登錄主頁動(dòng)態(tài)背景短視頻制作
- vue通過video.js解決m3u8視頻播放格式的方法
- Vue結(jié)合Video.js播放m3u8視頻流的方法示例
- 如何在vue中使用video.js播放m3u8格式的視頻
相關(guān)文章
windows下vue.js開發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細(xì)介紹了windows下vue.js開發(fā)環(huán)境搭建教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例
今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01vue3 Element Plus中icon圖標(biāo)不顯示的解決方案
這篇文章主要介紹了vue3 Element Plus中icon圖標(biāo)不顯示的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式
這篇文章主要介紹了vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問題解決辦法
我們在項(xiàng)目中經(jīng)常會(huì)用到ElementUI的表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問題解決的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12使用vue完成微信公眾號(hào)網(wǎng)頁小記(推薦)
公司最近有一個(gè)H5頁面的功能,比較簡單的一個(gè)調(diào)查表功能,嵌套在我們微信公眾號(hào)里面。這篇文章主要介紹了使用vue完成微信公眾號(hào)網(wǎng)頁小記,需要的朋友可以參考下2019-04-04