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