方法一(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, //缓存大小4m
lazyLoad: 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 = this
var 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, //缓存大小4m
lazyLoad: 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.parentNode
let 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>
文章浏览阅读4.4k次,点赞5次,收藏10次。文章目录一、前言二、代码2.1、main.h2.1、main.c三、DEBUG四、细节补充4.1、使用静态堆栈方式创建的线程不占用RTX5内存池的内存![在这里插入图片描述](https://img-blog.csdnimg.cn/20210527233256628.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbGxhY2U4OQ==,siz_osthreadattr_t
文章浏览阅读592次。我看了下自己的文章库存,好像还没有一篇关于Makefile的文章,所以这篇刚好可以弥补自己的缺失。makefile预定义变量预定义变量即系统自带的变量预定义变量作用AR库文件维护程序的名..._makefile 工程师
文章浏览阅读3.6k次。java中的Properties文件配置_java配置文件properties文件中
文章浏览阅读4.6k次。越来越长的内容正成为一种规范, 受到了Google和用户的广泛欢迎。 但是,阅读带有大量副标题的长格式内容可能有点令人头疼 。 输入Tocbot ,这是一个基于JavaScript的免费内容生成器表 。 这会在任何页面上自动创建一个固定的目录列表,并在您滚动经过每个标题时更新您的位置。 另请阅读: 使用HTML插槽创建自动生成的目录 主页包括完整的预览以及可用来进行所有设置的文档..._tocbot 得用法
文章浏览阅读3.2k次。有数组a[n],用java代码将数组元素顺序颠倒实现代码:import java.util.Arrays;public class Test{ public static void main(String[] args) { int [] a = new int[]{ (int)(Math.random() * 1000), (int)(Math.rand_将具有n个元素的一堆数组的内容前后倒置
文章浏览阅读2.1k次。在vue中需要生成二维码,这时候我们可以使用qrcode这个插件来完成1. 首先需要安装插件npm install --save qrcode2. 引入使用import QRCode from "qrcode"3. 直接上代码下一篇我会整理一个点击下载二维码的教程,有需要的可以看一下..._前端qrcode
文章浏览阅读1.2w次,点赞60次,收藏386次。目录《随机过程》第一章 随机过程及其分类1.随机过程与样本函数与随机变量的区别:2.典型分布第二章 Markov 过程1.markov的定义2.c-k方程3.首达时间4.状态分类5.马氏链的有限状态与极限分布6.非常返态的分析7.参数连续、状态离散的马氏链8.纯不连续马氏过程的极限性质第三章 Poisson 过程( Poisson 信号流)一.概念1.独立增量过程2.计数过程3.齐次泊松过程二.泊松过程与指数分布过程五.非时齐过程六.复合poisson九.更新过程第四章 二阶矩过程、平稳过程和随机分析第五章_随机过程知识点总结
文章浏览阅读2.8k次,点赞13次,收藏5次。这里写目录标题前言问题描述解决办法尾声前言简单的修改linux命令本来可以解决,要命的是我忘记了相关命令,结果百度了一堆…浪费了很多时间,很生气,决定自己写个教程,然后面的人别再继续被误导了。问题描述不多说了,很晚了,看图片吧解决办法右键打开“显示简介”输入mac开机命令开锁????之后,添加相关用户(懂得都懂)之后是重点把这个选上,才能算是完整的修改了所有子文件的读写权限尾声好了,早点睡大家..._hbuilderx无法保存文件,请检查权限或文件是否处于只读状态
文章浏览阅读6.2k次,点赞6次,收藏25次。1 周期矩形脉冲的傅里叶级数_数字信号处理傅里叶变换
文章浏览阅读3.8k次,点赞8次,收藏22次。基于RecyclerView实现图片画廊效果, 关键词:图片居中显示,RecyclerView平缓滚动,第一个视图居中,最后一个视图居中_recyclerview 画廊
文章浏览阅读141次。Nginx安装先到nginx官网下载linux版本的安装包http://nginx.org/en/download.html将安装包传输到linux上,使用tar zxvf 解压nginx安装包1、进入到nginx,直接先执行configure2、安装前置依赖(yum install -y gcc pcre pcre-devel openssl openssl-devel gd gd-devel),重新执行confingure3、使用make4、查看nginx安装目录,代_不会linux 可以学习nginx吗
文章浏览阅读1.3k次,点赞2次,收藏10次。一、写在前面终于过了9.28,几个月前在和同学吃饭的时候就在说,如果现在是国庆节多好啊,保研就结束了,不用再那么焦虑。保研前就看过网上好多经验帖,就想着等保研结束后把自己的经历与感想写下来,希望能给学弟学妹们一些帮助。在这里十分感谢一路上帮助并鼓励我的家人、老师、学长学姐和同学,是你们对我的帮助让我成功地走下来,走过那段焦虑的时光。以下是我几个月来的收获与体会,希望能对大家有帮助,如果有问题欢迎私..._北理与北航的推免夏令营哪个好通过