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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題
這篇文章主要介紹了解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue通過滾動行為實現(xiàn)從列表到詳情,返回列表原位置的方法
今天小編就為大家分享一篇vue通過滾動行為實現(xiàn)從列表到詳情,返回列表原位置的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08使用Vite+Vue3+Vant全家桶快速構(gòu)建項目步驟詳解
這篇文章主要為大家介紹了使用Vite+Vue3+Vant全家桶快速構(gòu)建項目步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06