資訊專欄INFORMATION COLUMN
現(xiàn)在直播很流行，心里癢癢就試試。
互聯(lián)網(wǎng)網(wǎng)絡(luò)流媒體簡(jiǎn)介
不講多，我們只需要知道常見的幾種流媒體格式就行，至于發(fā)展與演變，里面的專業(yè)知識(shí)，主要的流媒體格式有RTSP,RTMP,HLS,WebRtc，這對(duì)于開發(fā)就足夠。
播放HLS格式的視頻
為什么要選擇HLS格式的視頻呢？因?yàn)闉g覽器沒有辦法支持播放RTSP，無(wú)法識(shí)別這種類型的視頻流，RTMP格式的視頻是需要借助Flash否則也是無(wú)法播放，但是Chrome 88徹底禁用Flash，于是跟同事商量選擇了HLS，接下里就是踩坑的開始
安裝
前端采用插件video.js
npm install --save video.js
要注意下載的版本要在7.0以上，主要是因?yàn)榇税姹疽陨系牟恍枰驗(yàn)榘惭bvideojs-contrib-hls插件，它是用來(lái)解析HLS視頻的，但是只要你的版本在7.0以上就無(wú)需安裝，直接使用
"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)準(zhǔn)備就緒，其實(shí)用上面就可以不再參照其他，影響自己的判斷力。
其實(shí)提醒只需要將vlc的編碼器信息改為h264,一切都是順利成章了，當(dāng)然這個(gè)需要聯(lián)系給你視頻地址的那個(gè)人進(jìn)行配合，已經(jīng)都完成了。你可以試一試。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/128211.html
摘要：過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月至年月發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀， 過(guò)往項(xiàng)目 2018 年 9 月份項(xiàng)目匯總（共 26 個(gè)項(xiàng)目） 2018 年 8 月份項(xiàng)目匯總（共 29 個(gè)項(xiàng)目） 2018 年 7 月份項(xiàng)目匯總（...
摘要：過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個(gè)表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過(guò)往項(xiàng)目 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目） 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 6 月份發(fā)布的項(xiàng)目 ...
摘要：過(guò)往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過(guò)程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書視頻演示如何用純創(chuàng)作一個(gè)表達(dá)懷念童年心情的條紋彩虹心特效視頻演示如 過(guò)往項(xiàng)目 2018 年 5 月份項(xiàng)目匯總（共 30 個(gè)項(xiàng)目） 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 6 月份發(fā)布的項(xiàng)目 ...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 521·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2178·2023-01-20 08:28
