vue播放flv格式视频

方法一（flv.js为哔哩哔哩开源框架）

安装flv.js

npm install flv.js --save

引入：（在使用的页面引入）

import flvjs from "flv.js"

html:(video本身不支持flv格式视频，通过flv.js转换)

<video id="videoElement"></video>

js:(填写自己的url)

  var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://video.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();

方法2：

下载依赖：

npm i xgplayer-flv.js --save
npm i xgplayer --save

引入：

import FlvJsPlayer from 'xgplayer-flv.js';
import Player from 'xgplayer';

直接上代码（我封装在一个组件中）

<!--xgplayer  -->
<template><div class="cam" v-if="mainCamUrl != ''"><div class="video" v-show="isPlay" :id="camDOMid" ref="video"></div></div>
</template>
<script>import FlvJsPlayer from 'xgplayer-flv.js';import Player from 'xgplayer';export default {name: "XgPlayer",data() {return {isPlay: false,player: null,camDOMid:'liveId',mainCamUrl:'http:flv格式视频'}},mounted() {this.getData();},methods: {// 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)initPlayer(url) {console.log("this.camDOMid", this.camDOMid);var player = document.getElementById(this.camDOMid);this.isPlay = true;this.player = new FlvJsPlayer({id: this.camDOMid,url: url,fitVideoSize: 'auto',hasStart: true,autoplay: true, //自动播放，设置自动播放必要参数autoplayMuted: true, //自动播放静音，设置自动播放参数必要参数volume: 0,defaultMuted: true,isLive: true,playsinline: false,screenShot: true,fluid: true,aspectRatio: '16:9',whitelist: [''],ignores: ['time'],closeVideoClick: true,// errorTips: '<span class="app-error">无视频源</span>',customConfig: {isClickPlayBack: false},flvOptionalConfig: {enableWorker: true,enableStashBuffer: true, //启用缓存stashInitialSize: 4096, //缓存大小4mlazyLoad: false,lazyLoadMaxDuration: 40 * 60,autoCleanupSourceBuffer: true,autoCleanupMaxBackwardDuration: 35 * 60,autoCleanupMinBackwardDuration: 30 * 60} //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)});console.log("this.player", this.player);this.player.once('complete', () => {console.log('complete')//以下这段我没成功。try {this.player.play() // 尝试再次执行播放setTimeout(() => { // 500毫秒后检测if (!this.player.hasStart && this.player.currentTime ===0) { // hasStart返回false，并且播放时间还是0，那么就可以认为自动播放失效了isAutoPlay = false;}}, 500)} catch (e) {console.log(e);}})},getData() {let playUrl = this.mainCamUrl //播放地址this.initPlayer(playUrl)},},beforeDestroy() {if (this.player) {this.player.destroy();}console.log('销毁了');},}
</script><style scoped>.cam {position: relative;}.video {width: 100%;height: 100%;}
</style>

基于方法2的播放flv视频，完成项目要求的拖拽盒子

<template><div><div class="drag-follow-box" id="drag-video-id"><div class="drag-top" @mousedown="draggableFun($event)"><img src="../assets/close.png" class="drag-close" @click="closeDragBox($event)"><span class="drag-device">{{deviceName}}<i class="member-status-icon info-status"></i></span></div><div :id="dragPlayId" ref="video2" v-show="isPlay" class="drag-bottom" v-if="mainCamUrl != ''"></div></div></div></template><script>import FlvJsPlayer from 'xgplayer-flv.js';import Player from 'xgplayer';export default {name: "DragFlv",data() {return {isPlay: false,player: null,deviceName: '设备',dragPlayId: 'liveId2',mainCamUrl: 'http:flv视频链接'}},mounted() {this.getVideo()},methods: {getVideo() {let playUrl = this.mainCamUrl //播放地址this.initPlayer(playUrl)},// 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)initPlayer(url) {let _this = thisvar player = document.getElementById(this.dragPlayId);this.isPlay = true;console.log(this.dragPlayId)this.player = new FlvJsPlayer({id: _this.dragPlayId,url: url,fitVideoSize: 'auto',hasStart: true,autoplay: true, //自动播放，设置自动播放必要参数autoplayMuted: true, //自动播放静音，设置自动播放参数必要参数volume: 0,defaultMuted: true,isLive: true,playsinline: false,screenShot: true,fluid: true,aspectRatio: '16:9',whitelist: [''],ignores: ['time'],closeVideoClick: true,errorTips: '<span class="app-error">无视频源</span>',customConfig: {isClickPlayBack: false},flvOptionalConfig: {enableWorker: true,enableStashBuffer: true, //启用缓存stashInitialSize: 4096, //缓存大小4mlazyLoad: false,lazyLoadMaxDuration: 40 * 60,autoCleanupSourceBuffer: true,autoCleanupMaxBackwardDuration: 35 * 60,autoCleanupMinBackwardDuration: 30 * 60}});console.log("this.player", this.player);this.player.once('complete', () => {console.log('complete') //以下这段我没成功。try {this.player.play() // 尝试再次执行播放setTimeout(() => { // 500毫秒后检测if (!this.player.hasStart && this.player.currentTime ===0) { // hasStart返回false，并且播放时间还是0，那么就可以认为自动播放失效了isAutoPlay = false;}}, 500)} catch (e) {console.log("hhhh")console.log(e);}})},draggableFun(ev) {console.log("点击")ev.preventDefault()let div = ev.target.parentNodelet dragFlag = false;let x, y;div.onmousedown = function(e) {e.preventDefault()dragFlag = true;e = e || window.event;// 获取鼠标在元素上的位置（鼠标按下时在元素上得位置）x = e.clientX - div.offsetLeft;y = e.clientY - div.offsetTop;console.log(div.offsetLeft)console.log(div.offsetTop)console.log("-------------")};div.onmousemove = function(e) {e.preventDefault()if (dragFlag) {e = e || window.event;div.style.left = e.clientX - x + "px";div.style.top = e.clientY - y + "px";}};// 鼠标抬起事件div.onmouseup = function(e) {e.preventDefault()dragFlag = false;};},//关闭直播盒子closeDragBox(ev) {ev.target.parentNode.parentNode.remove()if (this.player) {this.player.destroy()}},},beforeDestroy() {if (this.player) {this.player.destroy();}console.log('销毁了');},}
</script><style scoped>.drag-follow-box {overflow: hidden;display: flex;flex-direction: column;width: 500px;height: 400px;border: 1px solid rgb(226, 226, 226);position: absolute;z-index: 2001;top: 35%;left: 400px;}.drag-top {width: 100%;height: 40px;border-bottom: 1px solid rgb(226, 226, 226);background: rgb(255, 255, 255);cursor: move;}.drag-bottom {flex: 1 1 0%;background: rgb(224, 224, 224);width: 100%;height: 100%;border: 0px;}.drag-close {float: right;margin: 12px;width: 14px;height: 14px;cursor: pointer;}.drag-device {float: left;margin: 9px 9px 9px 30px;}.member-status-icon {display: block;width: 10px;height: 10px;min-width: 10px;border: 2px solid rgb(255, 255, 255);border-radius: 50%;position: absolute;left: 6px;top: 13px;background-color: rgb(159, 155, 155);}
</style>

vue播放flv格式视频相关推荐

【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的. 因此提供两种解析方法嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件. 这里推荐dplayer--h ...
vue中播放flv格式视频（b站flv.js的使用）
1.下载flv.js npm install --save flv.js 2.引用 import flvjs from 'flv.js/dist/flv.min.js' 完整代码 <templa ...
rtmp流放与flv格式视频问题解决
项目:直播视频与视频回放插件:videojs+ckplayer 解决问题:一开始用flv.js播放flv格式视频文件超过40M,就会出现异常. 解决方法: 用ckplayer代替flv插件代码: ...
在vue和html中播放.flv格式的视频
借助一个html标签object,来嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件.下载链接利用B站开源的flv.js 通过将FLV文件流转换为ISO BMFF(Fragmented M ...
直播视频流+html,前端页面播放 rtmp 流与 flv 格式视频文件
技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放使用到插件 : videojs + ckplayer 遇到的 ...
vue中播放flv流视频
1.安装环境 npm install video.js npm install flv.js 2.引入video,在main.js中引入 import videojs from "video ...
uni-app 和H5页面视频播放flv格式视频监控
本文章向大家介绍uniApp 实现微信小程序和app视频播放flv格式视频监控,主要包括uniApp 实现微信小程序和app视频播放flv格式视频监控使用实例.应用技巧.基本知识点总结和需要注意事项, ...
如何快速不借用转换工具将FLV格式视频转换成MP4
FLV流媒体格式是一种新的视频格式,全称为Flash Video.它的出现有效地解决了视频文件导入Flash后,使导出的SWF文件体积庞大,所以就引出了FLV格式,主要特点就是体积小适合作为流媒体在 ...
如何将FLV格式视频转换成高清MP4格式方法
首先说明下FLV格式,FLV 是FLASH VIDEO的简称,FLV流媒体格式是随着Flash MX的推出发展而来的视频格式,它的主要特点便是体积小,适合作为流媒体在网上进行播放和传播,所以现在很多的 ...

vue播放flv格式视频

vue播放flv格式视频相关推荐

最新文章

热门文章