Vue中使用flv.js播放視頻的示例詳解
更新時(shí)間：2024年04月22日 15:49:06 作者：江湖行騙老中醫(yī)
這篇文章主要為大家詳細(xì)介紹了如何在Vue項(xiàng)目中使用flv.js播放視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
安裝
npm install flv.js
組件內(nèi)引入
import flvjs from 'flv.js'
使用
<template> <div> <video id="videoElement" controls autoplay muted width="300px" height="200px"></video> <button @click="play">播放</button> </div> </template>
import flvjs from 'flv.js'
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
flvPlayer:null
}
},
mounted() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
},
methods:{
play () {
this.flvPlayer.play();
}
}
}效果圖
播放失敗原因
協(xié)議不支持
在一開始我以為flvjs可以播放所有flv格式的視頻流，但是經(jīng)過測試和查看文檔發(fā)現(xiàn)，這個(gè)包僅支持HTTPFLV協(xié)議的流，如果使用RTMP協(xié)議的流則依然需要使用flash插件。
支持：http://www.xxxxxxx.com:18080/11/22.flv
不支持：rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv
到此這篇關(guān)于Vue中使用flv.js播放視頻的示例詳解的文章就介紹到這了,更多相關(guān)Vue flv.js播放視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問題
這篇文章主要介紹了解決vue elementUI 使用el-select 時(shí) change事件的觸發(fā)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中的style樣式如何動(dòng)態(tài)綁定，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
下面小編就為大家分享一篇淺談VUE監(jiān)聽窗口變化事件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法
今天小編就為大家分享一篇vue通過滾動(dòng)行為實(shí)現(xiàn)從列表到詳情,返回列表原位置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Element圖表初始大小及窗口自適應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了Element圖表初始大小及窗口自適應(yīng)實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
使用Vite+Vue3+Vant全家桶快速構(gòu)建項(xiàng)目步驟詳解
這篇文章主要為大家介紹了使用Vite+Vue3+Vant全家桶快速構(gòu)建項(xiàng)目步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
本篇文章主要介紹了詳解vue父子模版嵌套案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了淺談vue首次渲染全過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue自定義指令實(shí)現(xiàn)v-tap插件的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11