亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

最新評論