vue加載視頻流,實現(xiàn)直播功能的過程

更新時間：2022年04月24日 11:13:05 作者：周小盜

這篇文章主要介紹了vue加載視頻流,實現(xiàn)直播功能的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

最近在項目中有一個播放監(jiān)控站點圖像視頻的功能（類似與直播），然后對此進行了一個記錄與總結(jié)！

在此功能中，后臺本來給的是rtmp格式的視頻流，后在網(wǎng)上找了幾種方式，發(fā)現(xiàn)rtmp視頻流需要使用flash播放器，然而各大主流瀏覽器已經(jīng)放棄flash，因此最后又改用hls格式的視頻流，最終完成這個功能?。ㄈ绻皇窍胍晒Φ拇a，請直接看：三、vue加載hls視頻流）

一、視頻流是什么？

視頻流：視頻流其實就是流媒體（streaming media），是指將一連串?dāng)?shù)據(jù)壓縮后，經(jīng)過網(wǎng)絡(luò)分段發(fā)送，即時傳輸以供觀看音視頻的一種技術(shù)。監(jiān)控、直播等實時播放的功能一般都使用的是流媒體。
流媒體協(xié)議：流媒體協(xié)議是一種標準化的傳遞方法，用于將視頻分解為多個塊，將其發(fā)送給視頻播放器，播放器重新組合播放，常見的有rtmp、hls、hds、mss、MPEG-DASH等。
視頻格式（format）：視頻格式指視頻文件格式（container format）。常見 container format 包括 .mp4、.m4v、.avi、.mov等。

三種定義在這里不做過多贅述，有想深入了解的小伙伴可以自己再去了解一下；rtmp視頻流實際上就是以rtmp流媒體協(xié)議生成的流媒體；hls視頻流同理（這個視頻流的格式一般由后臺進行控制）

二、vue加載rtmp視頻流

1.方法一：video.js

npm install --save vue-video-player
npm install --save videojs-flash

<template>
?? ?<div class="box">
?? ??? ?<section id="video" class="video-js vjs-default-skin" ref="viodeRef"></section>
?? ?</div>
</template>

<script>
?? ?import Video from 'video.js'
?? ?import 'video.js/dist/video-js.min.css'
? export default {
? ? name: 'video-play-box',
? ? mounted(){
? ? ? this.player = Video('video', {
? ? ? ? //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
? ? ? ? controls: true,
? ? ? ? //自動播放屬性,muted:靜音播放
? ? ? ? muted: false,
? ? ? ? autoplay: true,
? ? ? ? //建議瀏覽器是否應(yīng)在<video>加載元素后立即開始下載視頻數(shù)據(jù)。
? ? ? ? preload: "auto",
? ? ? ? //設(shè)置視頻播放器的顯示寬度（以像素為單位）
? ? ? ? width: "800px",
? ? ? ? //設(shè)置視頻播放器的顯示高度（以像素為單位）
? ? ? ? height: "500px",
? ? ? ? // poster: 'https://static.shuxuejia.com/img/video_image.png', // 封面圖片
? ? ? ? sources: [{
? ? ? ? ? src:"rtmp://58.200.131.2:1935/livetv/cctv3",
? ? ? ? ? type:'video/rtmp'
? ? ? ? }],
?? ??? ??? ?
? ? ? ? playbackRates: [0.5, 1, 1.5, 2] //倍速播放
? ? ? }, function onPlayerReady() {
? ? ? ? Video.log('Your player is ready!'); // 比如： 播放量+1請求
? ? ? ? this.on('ended', function() {
? ? ? ? ? Video.log('Awww...over so soon?!');
? ? ? ? });
? ? ? });
? ? ? // this.myPlayer.src('rtmp://10.15.3.31:1935/live/openUrl/QUDplmM')
? ? ? // this.myPlayer.load('rtmp://10.15.3.31:1935/live/openUrl/QUDplmM')
?? ??? ?},
? ? beforeDestroy() {
? ? ? if (this.player) {
? ? ? ? this.player.dispose()
? ? ? }
? ? },
?? ??? ?
? }
</script>

<style scoped lang="scss">
.box{
?? ?width:100%;
?? ?height:100%;
?? ?display:flex;
?? ?align-items: center;
?? ?justify-content: center;
?? ?.video{
?? ??? ?margin:0 auto;
?? ?}
}
</style>

2.方法二：ckplayer

因為本人已經(jīng)嘗試過由于flash原因不可用，所以已經(jīng)都刪掉了，沒有部分截圖，就文字描述一下，感興趣的小伙伴可以自己搜一下。

第一步：官網(wǎng)下載ckplayer
第二步：將下載好的文件夾解壓后放到項目中的static(靜態(tài)資源文件夾)下
第三步：在index.html中對應(yīng)引入ckplayer.js文件
第四步：創(chuàng)建播放視頻的vue文件，代碼如下：

<template>
? <div>
? ? <label>ckplayer播放器插件Vue使用Demo</label>
? ? <div id="video"></div>
? </div>
</template>

<script>
export default {
? name: 'ckplayerPlugin',
? data () {
? ? return {
? ? }
? },
? mounted: function(){
? ? // 掛載完成后進行
? ? var videoObject = {
? ? ? ? ? ? ? ? container: '#video', //容器的ID或className
? ? ? ? ? ? ? ? variable: 'player', //播放函數(shù)名稱
? ? ? ? ? ? ? ? loaded: 'loadedHandler', //當(dāng)播放器加載后執(zhí)行的函數(shù)
? ? ? ? ? ? ? ? loop: true, //播放結(jié)束是否循環(huán)播放
? ? ? ? ? ? ? ? cktrack: 'static/ckplayer/material/srt.srt', //字幕文件
? ? ? ? ? ? ? ? poster: 'static/ckplayer/material/poster.jpg', //封面圖片
? ? ? ? ? ? ? ? preview: { //預(yù)覽圖片
? ? ? ? ? ? ? ? ? ? file: ['static/ckplayer/material/mydream_en1800_1010_01.png', 'static/ckplayer/material/mydream_en1800_1010_02.png'],
? ? ? ? ? ? ? ? ? ? scale: 2
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? config: '', //指定配置函數(shù)
? ? ? ? ? ? ? ? debug: true, //是否開啟調(diào)試模式
? ? ? ? ? ? ? ? drag: 'start', //拖動的屬性
? ? ? ? ? ? ? ? seek: 0, //默認跳轉(zhuǎn)的時間
? ? ? ? ? ? ? ? //廣告部分開始
? ? ? ? ? ? ? ? adfront: 'http://×××w.ckplayer.com/yytf/swf/front001.swf,http://×××w.ckplayer.com/yytf/swf/front002.swf', //前置廣告
? ? ? ? ? ? ? ? adfronttime: '15,15',
? ? ? ? ? ? ? ? adfrontlink: '',
? ? ? ? ? ? ? ? adpause: 'http://×××w.ckplayer.com/yytf/swf/pause001.swf,http://×××w.ckplayer.com/yytf/swf/pause002.swf',
? ? ? ? ? ? ? ? adpausetime: '5,5',
? ? ? ? ? ? ? ? adpauselink: '',
? ? ? ? ? ? ? ? adinsert: 'http://×××w.ckplayer.com/yytf/swf/insert001.swf,http://×××w.ckplayer.com/yytf/swf/insert002.swf',
? ? ? ? ? ? ? ? adinserttime: '10,10',
? ? ? ? ? ? ? ? adinsertlink: '',
? ? ? ? ? ? ? ? inserttime: '10,80',
? ? ? ? ? ? ? ? adend: 'http://×××w.ckplayer.com/yytf/swf/end001.swf,http://×××w.ckplayer.com/yytf/swf/end002.swf',
? ? ? ? ? ? ? ? adendtime: '15,15',
? ? ? ? ? ? ? ? adendlink: '',
? ? ? ? ? ? ? ? //廣告部分結(jié)束
? ? ? ? ? ? ? ? promptSpot: [ //提示點
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? words: '提示點文字01',
? ? ? ? ? ? ? ? ? ? ? ? time: 30
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? words: '提示點文字02',
? ? ? ? ? ? ? ? ? ? ? ? time: 150
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? video: [
? ? ? ? ? ? ? ? ? ? ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文標清', 0],
? ? ? ? ? ? ? ? ? ? ['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
? ? ? ? ? ? ? ? ? ? ['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
? ? ? ? ? ? ? ? ? ? ['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0]
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? };
? ? ? // 定義一個對象
? ? ? var player = new ckplayer(videoObject);
? }
}
</script>

<style scoped>
? #video {
? ? width: 600px;
? ? height: 400px;
? ? margin: 0px auto;
? }
</style>

總結(jié)：經(jīng)檢驗，以上兩種方法加載均需要flash的支持，然而目前大眾瀏覽器均已放棄flash，所以建議使用下方hls視頻流播放；

三、vue加載hls視頻流

1.index.html中

添加：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

2.video-player.vue文件

<template>
? <div class="hls">
? ? <video id="video" muted></video>
? </div>
</template>

<script>
export default {
? name: 'hls-video',
? components: {
? },
? data() {
? ? return{
? ? ? ? video:null,
? ? ? ? hls:null
? ? }
? },
? props: {
? ? selectStdInfo:{
? ? ? type:Object,
? ? ? required:true
? ? }
? },
? watch:{
? ? // 視頻彈窗時如果彈窗已存在，重新加載視頻流
? ? "selectStdInfo.mourl":function(oldV,newV){
? ? ? if(newV!=oldV){
? ? ? ? this.initVideo()
? ? ? }
? ? }
? },
? mounted() {
? ? this.initVideo()
? },
? destroyed(){
? ? this.reset()
? },
? methods: {
? ?? ? ?//組件銷毀時，調(diào)用該方法，停止請求；detachMedia和stopLoad為hls官網(wǎng)方法
? ? ? reset(){
? ? ? ? ? this.hls.detachMedia(this.video)
? ? ? ? ? this.hls.stopLoad() ??
? ? ? },
? ? ? //初始化video ?
? ? ? initVideo () { ? ? ??
? ? ? ? ? this.video = document.getElementById('video')
? ? ? ? ? // 瀏覽器是否支持hls?
? ? ? ? ? if(Hls.isSupported()) {
? ? ? ? ? ? ?//如果hls已存在，先清空
? ? ? ? ? ? ?if(this.hls){
?? ? ? ? ? ? ? ?this.reset()
?? ? ? ? ? ? ?}else{
?? ? ? ? ? ? ? ?this.hls = new Hls()
?? ? ? ? ? ? ?}
?? ? ? ? ? ? ?//this.selectStdInfo.mourl為父組件傳給該子組件的視頻url
?? ? ? ? ? ? ?this.hls.loadSource(this.selectStdInfo.mourl)
?? ? ? ? ? ? ?this.hls.attachMedia(this.video)
?? ? ? ? ? ? ?this.hls.on(Hls.Events.MANIFEST_PARSED,()=>{
?? ? ? ? ? ? ? ?this.video.play()
?? ? ? ? ? ? ?});
?? ? ? ? ?}else if (video.canPlayType('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')) {
? ? ? ? ?? ?// 不支持hls ,支持蘋果原生?
? ? ? ? ? ?? ?this.video.src = ''
? ? ? ? ? ??? ?this.video.addEventListener('loadedmetadata',function() {
? ? ? ? ? ? ? ? this.video.play()
? ? ? ? ? ?})
? ? ? ? ?}
? ? ? }
? },
}

</script>
<style scoped lang="scss">
.hls{
?? ?width:100%;
?? ?height:100%;
?? ?display:flex;
?? ?align-items: center;
?? ?justify-content: center;
?? ?#video{
? ? width:100%;
?? ??? ?margin:0 auto;
?? ?}
}
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: