vue+node 實(shí)現(xiàn)視頻在線(xiàn)播放的實(shí)例代碼
1.node服務(wù)端
數(shù)據(jù)流傳輸,可在線(xiàn)緩存
//獲取參數(shù)
var params=urldeal.parse(req.url,true).query
const ROOT_PATH = process.cwd();//必須使用絕對(duì)路徑,使用相對(duì)路徑會(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客戶(hù)端
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í)開(kāi)始回放。
muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。
loop: false, // 導(dǎo)致視頻一結(jié)束就重新開(kāi)始。
preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開(kāi)始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開(kāi)始加載視頻(如果瀏覽器支持)
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將擁有流體大小。換句話(huà)說(shuō),它將按比例縮放以適應(yīng)其容器。
sources: [{
type: "",
//src: require('@/assets/'+this.vurl)//url地址
src: 'http://localhost:10086/videos?url=/public/videos/'+this.vurl, //url地址,請(qǐng)求中需要包含具體的視頻文件名
}],
poster: '', //你的封面地址
// width: document.documentElement.clientWidth,
notSupportedMessage: '此視頻暫無(wú)法播放,請(qǐng)稍后再試', //允許覆蓋Video.js無(wú)法播放媒體源時(shí)顯示的默認(rèn)信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按鈕
}
}
}
},
附錄:vue+flvjs播放直播流FLV,分頁(yè)時(shí)如何斷開(kāi)之前直播流解決辦法
使用flvjs庫(kù)同時(shí)播放flv文件,需要分頁(yè)發(fā)現(xiàn),之前直播流沒(méi)有斷開(kāi),很影響性能,網(wǎng)上查閱借鑒下邊代碼實(shí)現(xiàn)斷開(kāi)上頁(yè)直播流
// 銷(xiāo)毀播放器實(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', () => {
//事件名稱(chēng)可以在上述查詢(xún)
this.getLivingList();
});
this.player[this.player.length - 1].on('error', () => {
//事件名稱(chēng)可以在上述查詢(xún)
this.getLivingList();
});
},
// 翻頁(yè)操作
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 {
// 如果返回沒(méi)有直播數(shù)據(jù)又不是第一頁(yè)。就跳到第一頁(yè)再請(qǐng)求一下
if (this.pageno > 1) {
this.pageno = 1;
this.getLivingList();
}
}
}
},
總結(jié)
到此這篇關(guān)于vue+node 實(shí)現(xiàn)視頻在線(xiàn)播放的實(shí)例代碼的文章就介紹到這了,更多相關(guān)vue視頻在線(xiàn)播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿(mǎ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登錄主頁(yè)動(dòng)態(tài)背景短視頻制作
- vue通過(guò)video.js解決m3u8視頻播放格式的方法
- Vue結(jié)合Video.js播放m3u8視頻流的方法示例
- 如何在vue中使用video.js播放m3u8格式的視頻
相關(guān)文章
windows下vue.js開(kāi)發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細(xì)介紹了windows下vue.js開(kāi)發(fā)環(huán)境搭建教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例
今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
vue3 Element Plus中icon圖標(biāo)不顯示的解決方案
這篇文章主要介紹了vue3 Element Plus中icon圖標(biāo)不顯示的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式
這篇文章主要介紹了vue 動(dòng)態(tài)添加class,三個(gè)以上的條件做判斷方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問(wèn)題解決辦法
我們?cè)陧?xiàng)目中經(jīng)常會(huì)用到ElementUI的表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問(wèn)題解決的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記(推薦)
公司最近有一個(gè)H5頁(yè)面的功能,比較簡(jiǎn)單的一個(gè)調(diào)查表功能,嵌套在我們微信公眾號(hào)里面。這篇文章主要介紹了使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記,需要的朋友可以參考下2019-04-04

