vue使用video.js實(shí)現(xiàn)播放m3u8格式的視頻
更新時(shí)間：2023年12月08日 10:47:13 作者：小馬甲丫
這篇文章主要為大家詳細(xì)介紹了vue如何使用video.js實(shí)現(xiàn)播放m3u8格式的視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
一、前言
實(shí)時(shí)推送的視頻流的需求，vue中就可以使用video.js播放m3u8格式的視頻流
1.官網(wǎng)
2.Github
二、實(shí)現(xiàn)
2.1、安裝依賴
yarn add video.js yarn add videojs-contrib-hls // 這是播放hls流需要的插件 yarn add videojs-flash // 這是播放rtmp流需要的插件 yarn add mux.js // 在vue項(xiàng)目中，若不安裝它可能報(bào)錯(cuò)
2.2、main.js
引入如下依賴：
import "video.js/dist/video-js.css"; // 引入video.js的css import hls from "videojs-contrib-hls"; // 播放hls流需要的插件 import Vue from "vue"; Vue.use(hls);
2.3、video.vue
抽離出來(lái)一個(gè)視頻組件
<template>
<video id="videoPlayer" class="video" muted width="100%" height="580px" />
</template>
<script>
import Videojs from 'video.js'
export default {
data() {
return {
player: null
}
},
beforeDestroy() {
if (this.player) {
this.player.dispose() // Removing Players,該方法會(huì)重置videojs的內(nèi)部狀態(tài)并移除dom
}
},
activated() {
if (this.player) {
this.player.play()
}
},
deactivated() {
if (this.player) {
this.player.pause()
}
},
mounted() {
this.initVideo()
},
methods: {
initVideo(url) {
if (!this.player) {
this.player = Videojs('videoPlayer', {
autoplay: true, // 設(shè)置自動(dòng)播放
muted: true, // 設(shè)置了它為true，才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音 （Chrome66及以上版本，禁止音視頻的自動(dòng)播放）
preload: 'auto', // 預(yù)加載
controls: false // 顯示播放的控件
})
}
this.player.src([{
src: url,
type: 'application/x-mpegURL' // 告訴videojs,這是一個(gè)hls流
}])
}
}
}
</script>
<style lang="scss" scoped>
.video, video {
width: 100%;
height: 580px;
}
/deep/ .vjs-loading-spinner {
position: relative;
.vjs-control-text {
opacity: 0;
}
}
</style>
2.4、其它
rtmp流的話，需再安裝依賴videojs-flash
// main.js import flash from "videojs-flash"; // 播放rtmp流需要的插件 import Vue from "vue"; Vue.use(flash);
組件中設(shè)置src時(shí)需要注意：
this.player.src([{
src: url,
type: 'rtmp/flv' // 告訴videojs這是一個(gè)rtmp流視頻
}])
到此這篇關(guān)于vue使用video.js實(shí)現(xiàn)播放m3u8格式的視頻的文章就介紹到這了,更多相關(guān)vue video.js播放m3u8視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用CSS動(dòng)畫實(shí)現(xiàn)DOM向上滾動(dòng),JS動(dòng)態(tài)計(jì)算數(shù)據(jù)條數(shù)并實(shí)時(shí)調(diào)整滾動(dòng)速度,確保在onMounted中調(diào)用以正確渲染DOM2025-07-07
vue3封裝echarts圖表數(shù)據(jù)無(wú)法渲染到頁(yè)面問題
這篇文章主要介紹了vue3封裝echarts圖表數(shù)據(jù)無(wú)法渲染到頁(yè)面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
Vue3實(shí)現(xiàn)簡(jiǎn)約型側(cè)邊欄的示例代碼
本文主要介紹了Vue3實(shí)現(xiàn)簡(jiǎn)約型側(cè)邊欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue AST的轉(zhuǎn)換實(shí)現(xiàn)方法講解
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對(duì)AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過(guò)程。新的AST可以是原語(yǔ)言或原DSL的描述，也可以是其他語(yǔ)言或其他DSL的描述。例如，我們可以對(duì)模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST2023-01-01
filter?方法會(huì)創(chuàng)建一個(gè)新的數(shù)組,其中包含滿足指定條件的所有元素,這個(gè)方法非常適合循環(huán)遍歷數(shù)組并根據(jù)特定條件過(guò)濾元素的情況,這篇文章主要介紹了Vue3基礎(chǔ)[常用的循環(huán)],需要的朋友可以參考下2024-01-01
基于Vue實(shí)現(xiàn)卡片無(wú)限滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何利用Vue制作出卡片無(wú)限滾動(dòng)動(dòng)畫，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定幫助，需要的可以參考一下2022-05-05
這篇文章主要介紹了vue3中的watch()的用法和具體作用,通過(guò)合理和熟練使用watch()方法，開發(fā)者可以更加高效地完成前端開發(fā)工作，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了詳解Vue自定義hook函數(shù)，hook函數(shù)本質(zhì)是一個(gè)函數(shù)，把setup函數(shù)中使用的Composition?API進(jìn)行了封裝，更多相關(guān)內(nèi)容感興趣的朋友可以參考一下2022-06-06
vue滾動(dòng)軸插件better-scroll使用詳解
這篇文章主要為大家詳細(xì)介紹了vue滾動(dòng)軸插件better-scroll的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10