Vue中使用flv.js播放视频的示例详解
更新时间:2024年04月22日 15:49:06 作者:江湖行骗老中医
这篇文章主要为大家详细介绍了如何在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(); } } }
效果图
播放失败原因
协议不支持
在一开始我以为flvjs可以播放所有flv格式的视频流,但是经过测试和查看文档发现,这个包仅支持HTTPFLV协议的流,如果使用RTMP协议的流则依然需要使用flash插件。
支持:http://www.xxxxxxx.com:18080/11/22.flv
不支持:rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv
到此这篇关于Vue中使用flv.js播放视频的示例详解的文章就介绍到这了,更多相关Vue flv.js播放视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
在vue-cli的组件模板里使用font-awesome的两种方法
今天小编就为大家分享一篇在vue-cli的组件模板里使用font-awesome的两种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论