Vue中使用flv.js播放視頻的示例詳解
更新時間：2024年04月22日 15:49:06 作者：江湖行騙老中醫(yī)
這篇文章主要為大家詳細介紹了如何在Vue項目中使用flv.js播放視頻,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
安裝
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)，這個包僅支持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播放視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
uniapp Vue3中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題
存在跨域問題的原因是因為瀏覽器的同源策略,也就是說前端無法直接發(fā)起跨域請求,同源策略是一個基礎的安全策略,但是這也會給uniapp/Vue開發(fā)者在部署時帶來一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題,需要的朋友可以參考下2024-06-06
Vue 是一套用于構(gòu)建用戶界面的漸進式框架，和React，都自稱自己只關注視圖層，全家桶對于開發(fā)一個完整的中大型單頁面應用項目所必須的所必須的插件和框架，本文給大家分享Vue全家桶入門基礎教程，感興趣的朋友一起看看吧2021-05-05
vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解
在vue中我們使用模板HTML語法來組建頁面的，使用render函數(shù)我們可以用js語言來構(gòu)建DOM，這篇文章主要介紹了vue中的render函數(shù)、h（）函數(shù)、函數(shù)式組件,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
Vue中消息橫向滾動時setInterval清不掉的問題及解決方法
最近在做項目時,需要進行兩個組件聯(lián)動,一個輪詢獲取到消息,然后將其傳遞給另外一個組件進行橫向滾動展示,結(jié)果滾動的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動時setInterval清不掉的問題及解決方法，感興趣的朋友一起看看吧2019-08-08
一文解決vue2 element el-table自適應高度問題
在寫公司后臺項目的時候遇到一個需求,要求表格頁面不能有滾動條,所以必須封裝一個公共方法來實現(xiàn)表格自適應高度,本問小編給大家介紹了如何解決vue2 element el-table自適應高度問題,需要的朋友可以參考下2023-11-11
Vue + Webpack + Vue-loader學習教程之相關配置篇
這篇文章主要介紹了關于Vue + Webpack + Vue-loader的相關配置篇，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
第一次接觸神奇的vue.js，主要了解一下v-model、v-if、v-else、v-show、v-for等，感興趣的小伙伴們可以一起學習一下2016-12-12
vue 使用 echarts 繪制中國地圖的實現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01