Vue+flvjs播放flv文件

官方文档：

https://github.com/bilibili/flv.js

安装：

npm install --save 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 {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();}}
}

效果：

播放失败原因：

协议不支持
在一开始我以为flvjs可以播放所有flv格式的视频流，但是经过测试和查看文档发现，这个包仅支持HTTPFLV协议的流，如果使用RTMP协议的流则依然需要使用flash插件。

支持：http://www.xxxxxxx.com:18080/11/22.flv
不支持：rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv

Vue+flvjs播放flv文件相关推荐

vue中播放flv流视频
1.安装环境 npm install video.js npm install flv.js 2.引入video,在main.js中引入 import videojs from "video ...
【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
网页中播放FLV文件的代码
使用方法: 方法一.js嵌入直接copy下面代码,修改其中红色部分,即:swf_width.swf_height.texts.files 参数 <script type="text/ ...
如何让暴风影音播放flv文件
我自己电脑上装的是暴风1.0很老的版本了,不过,现在一直还在用它,感觉很好,而且能播放双字幕. 可是前段时间发现有的flv文件不能播放,网上找了很多,都说在综合设置里改什么realmedia,这个对我 ...
播放FLV文件的方法
使用方法: 方法一.js嵌入直接copy下面代码,修改其中红色部分,即:swf_width.swf_height.texts.files 参数 <script type="text/ ...
vue中播放flv格式视频（b站flv.js的使用）
1.下载flv.js npm install --save flv.js 2.引用 import flvjs from 'flv.js/dist/flv.min.js' 完整代码 <templa ...
通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的. 因此提供两种解析方法嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件. 这里推荐dplayer--h ...
在HTML中嵌入并播放FLV媒体文件
在HTML中嵌入并播放FLV媒体文件 December 8th 2012 评论(2) 这个说起来比较复杂,并且在以后的html5规范中也将摒弃(个人认为), 但面对目前国内的主流浏览器,如果你想要在网 ...
动态播放外部FLV 文件和预加载 FLV 文件
/***************** wgscd (c)2005 ' qq:153964481 e-mail:wgscd@126.com blog:http://blog.csdn.net/wgsn ...
如何动态播放外部 FLV 文件
您可以在运行时加载 FLV 文件,并在 SWF 文件中播放.可以将这些文件加载到视频对象或诸如 FLVPlayback 之类的组件中.下面的示例演示如何在视频对象中播放名为 clouds.flv 的文 ...

Vue+flvjs播放flv文件

官方文档：

安装：

组件内引入依赖：

实例：

效果：

播放失败原因：

Vue+flvjs播放flv文件相关推荐

最新文章

热门文章