vue-video-player(5.0.2)

最近我的項目做了一個監控視屏的顯示，后臺提供的視屏格式是rtmp

后來又改為m3u8，沒成功，原因是占用內存過大，所以取消了這種方式

一、安裝

npm i vue-video-player -S

npm i videojs-flash -S ______播放rtmp

npm i videojs-contrib-hls -S ______播放m3u8

二、全局引入(main.js)

import VideoPlayer from 'vue-video-player'

import 'video.js/dist/video-js.css' //videoJs的樣式

// import 'vue-video-player/src/custom-theme.css' //vue-video-player的樣式

import 'videojs-flash'; //引入才能播放rtmp視屏

// import 'videojs-contrib-hls' //引入才能播放m3u8文件

Vue.use(VideoPlayer)

三、在頁面中使用

ref="videoPlayer"

:playsinline="true"

:options="playerOptions"

@play="onPlayerPlay($event)"

@pause="onPlayerPause($event)"

@ended="onPlayerEnded($event)"

>

//完整的配置數據(不要的可以直接注釋掉)

data(){

return {

playerOptions:{

playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

autoplay: false, //如果true,瀏覽器準備好時開始回放。

muted: false, // 默認情況下將會消除任何音頻。

loop: false, // 導致視頻一結束就重新開始。

preload: 'auto', // 建議瀏覽器在加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻(如果瀏覽器支持)

language: 'zh-CN',

aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字(例如"16:9"或"4:3")

// fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。

sources: [{

type: "application/x-mpegURL",//這里的種類支持很多種：基本視頻格式、直播、流媒體等，具體可以參看git網址項目

src: "" //url地址

}],

// hls:true, //如果是播放m3u8必須加(需注釋掉techOrder,不然會有報錯)

techOrder: ['flash'], //播放rtmp必須加

poster: "", //你的封面地址

notSupportedMessage: '此視頻暫無法播放，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。

controlBar: {

timeDivider: true,

durationDisplay: true,

remainingTimeDisplay: false,

fullscreenToggle: true //全屏按鈕

}

}

}

}

四、使用過程中遇到的問題

1、設置了autoplay: true 不能自動播放，原因是我這里播放視頻的窗口小于了400x400

2、如何使用外部按鈕點擊全屏

//點擊全屏播放

handleFullScreen(index){

const player = this.$refs.videoPlayer.player;

player.requestFullscreen();//調用全屏api方法

player.isFullscreen(true)

player.play()

}

用來測試的流

香港財經：rtmp://202.69.69.180:443/webcast/bshdlive-pc

芒果TV：rtmp://58.200.131.2:1935/livetv/hunantv

韓國GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

總結

以上是生活随笔為你收集整理的java rtmp m3u8_vue常用插件之视频播放（rtmp m3u8）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。