Vue中使用flv.js播放視頻的示例詳解
更新時間：2024年04月22日 15:49:06 作者：江湖行騙老中醫(yī)
這篇文章主要為大家詳細介紹了如何在Vue項目中使用flv.js播放視頻,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
安裝
npm install flv.js
組件內引入
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格式的視頻流，但是經過測試和查看文檔發(fā)現(xiàn)，這個包僅支持HTTPFLV協(xié)議的流，如果使用RTMP協(xié)議的流則依然需要使用flash插件。
支持：http://www.xxxxxxx.com:18080/11/22.flv
不支持：rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv
到此這篇關于Vue中使用flv.js播放視頻的示例詳解的文章就介紹到這了,更多相關Vue flv.js播放視頻內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
Vue(element ui)中操作row參數(shù)的使用方式
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了詳解VUE中常用的幾種import（模塊、文件）引入方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了nuxt.js寫項目時增加錯誤提示頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue的插值表達式是一種特殊的語法,用于在模板中動態(tài)地將數(shù)據(jù)綁定到視圖中,一般使用雙大括號 ("{{ }}")將表達式包裹起來,下面我們就來根據(jù)三個案例來深入了解下插值表達式的使用吧2023-11-11
今天小編就為大家分享一篇解決vue 表格table列求和的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Effect幾乎是Vue3.0中最重要的一個功能了,計算屬性監(jiān)聽函數(shù)都是基于effect實現(xiàn)的,下面這篇文章主要給大家介紹了關于vue3中effect函數(shù)到底是什么的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue3使用echarts并封裝echarts組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了快速搭建vue2.0+boostrap項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
網(wǎng)上大部分關于Nuxt打包部署教程可謂是可以用五花八門來形容,這對于第一次接觸的朋友簡直是無從下手,這篇文章主要給大家介紹了關于Nuxt3+ElementPlus構建打包部署的相關資料,需要的朋友可以參考下2023-01-01