Vue如何接入hls/m3u8的直播視頻詳解
前言
最近做了一個(gè)后臺(tái)系統(tǒng)，需要調(diào)取工廠監(jiān)控視頻流顯示在前端的頁面上，其中遇到了一些坑，在這里做個(gè)記錄，希望對(duì)前端小伙伴有所幫助吧！廢話不多說了，直接開搞
互聯(lián)網(wǎng)網(wǎng)絡(luò)流媒體簡(jiǎn)介
這塊我也不是很懂，博大精深，不在這扯皮了，大家只需要知道常見的幾種流媒體格式就行，至于發(fā)展與演變，里面的專業(yè)知識(shí)，我也不懂，主要的流媒體格式有RTSP,RTMP,HLS,WebRtc，這些足夠解決日常開發(fā)了
播放HLS格式的視頻
為什么要選擇HLS格式的視頻呢？因?yàn)闉g覽器沒有辦法支持播放RTSP，無法識(shí)別這種類型的視頻流，RTMP格式的視頻是需要借助Flash否則也是無法播放，但是Chrome 88徹底禁用Flash，于是跟同事商量選擇了HLS，接下里就是踩坑的開始
安裝
前端采用插件video.js
npm install --save video.js
現(xiàn)在下載的版本應(yīng)該是7.0以上的，這個(gè)是有用的，因?yàn)檫@個(gè)版本以上的不需要因?yàn)榘惭bvideojs-contrib-hls插件，它是用來解析HLS視頻的，但是只要你的版本在7.0以上就無需安裝，直接使用
"video.js": "^7.19.2",
實(shí)現(xiàn)
<template>
<div>
<video
id="my-video"
class="video-js vjs-default-skin"
controls
preload="auto"
width="500px">
<source :src="srcUrl" />
</video>
</div>
</template>
<script>
import videojs from "video.js";
export default {
props:{
"srcUrl":{
type:String,
default:'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
}
},
mounted() {
this.getVideo();
},
methods:{
getVideo() {
videojs(
"my-video",
{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: false
},
function() {
this.play();
}
);
},
}
}
</script>main.js 引入樣式
import 'video.js/dist/video-js.css'
這就是所有的代碼，這里已經(jīng)封裝成組件了，直接用就行，傳入地址即可，樣式自己修改吧！
坑
這些都是開發(fā)中我從網(wǎng)上搜集的，第一做一臉茫然，百度上的東一句西一句，代碼拿過來也是無法播放，于是直到我看到了這個(gè)
果真是這樣，只需要將vlc的編碼器信息改為h264,一切都是順利成章了，當(dāng)然這個(gè)需要聯(lián)系給你視頻地址的那個(gè)人進(jìn)行配合，網(wǎng)上我看到的其他方式我測(cè)試都是不可以播放的，好了，就是這樣，希望對(duì)遇到同樣問題的小伙伴有所幫助吧?。?！
總結(jié)
到此這篇關(guān)于Vue如何接入hls/m3u8直播視頻的文章就介紹到這了,更多相關(guān)Vue接入hls/m3u8直播視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli-service?build?自定義參數(shù)方式
這篇文章主要介紹了vue-cli-service?build?自定義參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue?scss后綴文件background-image路徑錯(cuò)誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。下面這篇文章主要給大家介紹了關(guān)于利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要介紹了Vue.js自定義指令的基本使用詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05
這篇文章主要給大家介紹了如何利用vue.js實(shí)現(xiàn)拖放功能的相關(guān)資料，本文并未使用現(xiàn)有的庫，而是使用內(nèi)置的HTML拖放API來實(shí)現(xiàn)簡(jiǎn)單的拖放系統(tǒng)，需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vuejs對(duì)接后端踩過的坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
使用vue實(shí)現(xiàn)簡(jiǎn)單鍵盤的示例(支持移動(dòng)端和pc端)
這篇文章主要介紹了使用vue實(shí)現(xiàn)簡(jiǎn)單鍵盤的示例(支持移動(dòng)端和pc端)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Vue 開發(fā)必須知道的36個(gè)技巧(小結(jié))
這篇文章主要介紹了Vue 開發(fā)必須知道的36個(gè)技巧(小結(jié)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本文主要介紹了el-table 行合并的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08