vue播放flv和rtsp 格式视频

vue播放flv和rtsp 格式视频

调用

 <znvVideo:vId="'0'":src="url":type="'rtsp'"></znvVideo>

1.播放flv "flv.js":"1.6.2"

新建znVido.vue

<template><div class="box-video" :id="'box-video-' + vId"><video:id="'znv-video-' + vId"class="video-js znv-video":class="type + '-video'"controlslist="noplaybackrate nodownload disablePictureInPicture noremoteplayback"disablePictureInPicturecontrolsmutedautoplay></video><!-- noplaybackrate :隐藏倍速
nodownload:隐藏下载
disablePictureInPicture:隐藏画中画 --></div>
</template><script>
import flvjs from 'flv.js'
export default {name: 'ZnvVideo',data() {return {flvPlayer: null}},props: {vId: {type: String,required: true,default: ''},src: {type: String,required: true,default: ''},type: {type: String,required: true,default: ''}},mounted() {this.initFlv()},watch: {src() {this.initFlv()}},beforeDestroy() {if (this.flvPlayer) {this.flvPlayer.unload()this.flvPlayer.detachMediaElement()this.flvPlayer.destroy()this.flvPlayer = null}},methods: {initFlv() {if (flvjs.isSupported()) {var videoElement = document.getElementById('znv-video-' + this.vId)this.flvPlayer = flvjs.createPlayer({type: 'flv',url: this.src})this.flvPlayer.attachMediaElement(videoElement)this.flvPlayer.load()this.flvPlayer.play()}}}
}
</script><style lang="scss">
// // 播放按钮
video::-webkit-media-controls-play-button {display: none !important;
}
// 当前播放时间
video::-webkit-media-controls-current-time-display {display: none !important;
}
// 剩余时间
video::-webkit-media-controls-time-remaining-display {display: none !important;
}
// 音量按钮
// video::-webkit-media-controls-volume-control-container {
//   display: none !important;
// }
// 全屏
// video::-webkit-media-controls-fullscreen-button {
//   display: none !important;
// }
// 时间轴
video::-webkit-media-controls-timeline {display: none !important;
}
// 更多选项 --然而并不生效
video::-internal-media-controls-overflow-button {display: none !important;
}
/* 所有控件 */
// video::-webkit-media-controls-enclosure {
//   display: none;
// }.box-video {width: 100%;height: 100%;.znv-video {width: 100%;height: 100%;.vjs-tech {pointer-events: none;// object-fit: cover;object-fit: fill;}}
}
</style>

1.播放rtsp

下载包

  "video.js": "^7.6.6","videojs-flash": "^2.2.1",

新建znVido.vue

<template><div class="box-video" :id="'box-video-' + vId"><video:id="'znv-video-' + vId"class="video-js znv-video":class="type + '-video'"playsinlineautoplay="autoplay"></video></div>
</template><script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {name: "ZnvVideo",data() {return {options: {// techOrder: ["html5", "Flvjs", "Streamedianjs"],autoplay: true, // 是否自动播放controls: false, // 是否显示控制条language: "zh-CN", // 设置语言muted: true, // 是否静音preload: "auto", // 预加载fluid: false, // 自适应宽高// src: this.src, // 要嵌入的视频源的源 URLobjectFit: "cover", // 同css object-fit,作用于video标签notSupportedMessage: "此视频暂无法播放,请稍后再试",controlBar: {// progressControl: false,// liveDisplay: false,fullscreenToggle: true, // 全屏按钮,默认为truepictureInPictureToggle: true, // 画中画按钮,默认为truevolumePanel: true, // 声音面板currentTimeDisplay: false, // 当前播放时间timeDivider: false, // 时间分割线durationDisplay: false, // 总时间remainingTimeDisplay: false, // 剩余时间},},};},props: {vId: {type: String,required: true,default: "",},src: {type: String,required: true,default: "",},type: {type: String,required: true,default: "",},},mounted() {// console.log(this.type, this.src, this.vId,"视频流--------");this.player = videojs("znv-video-" + this.vId, this.options);this.setSrc();},watch: {src() {// this.player.reset()this.setSrc();// this.player.load()// this.player.play()},},methods: {setSrc() {if (this.type === "hls") {this.initHls();} else if (this.type === "rtsp") {this.initRtsp();} else if (this.type === "flv") {this.initFlv();} else if (this.type === "mp4") {this.initMp4();}},initRtsp() {this.player.src({src: this.src,type: "application/x-mpegURL",// withCredentials: false,// bufferDuration: 5,});},initHls() {this.player.src({src: this.src,type: "application/x-mpegURL",});},initFlv() {this.player.src({src: this.src,type: "video/x-flv",});},initMp4() {this.player.src({src: this.src,});},},beforeDestroy() {if (this.player) {this.player.dispose();this.player = null;}},
};
</script><style lang="scss">
.box-video {width: 100%;height: 100%;.znv-video {width: 100%;height: 100%;.vjs-tech {pointer-events: none;object-fit: cover;}}.rtsp-video {.vjs-progress-control {visibility: hidden;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56524.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

构建物联网智能项目的框架与实践

1. 引言 物联网(Internet of Things, IoT)技术已经深入应用到各个领域,从智能家居、智慧城市到工业4.0,其应用的广度与深度不断扩展。物联网智能项目集成了传感器、网络、计算和自动化系统,通过智能化的设备和数据分析实现各种任务的自动执行与优化。随着大数据、人工智能…

机器学习—特性缩放

特性缩放的技术能使梯度下降运行得更快&#xff0c;让我们先来看看功能大小之间的关系&#xff0c;这就是该特性的数字和相关参数的大小&#xff0c;作为一个具体的例子&#xff0c;让我们用两个特征来预测房子的价格&#xff0c;X1代表一个房子的大小&#xff0c;X2代表两个卧…

【黑马点评优化】之使用Caffeine+Redis实现应用级二层缓存

【黑马点评优化】之使用CaffeineRedis实现应用级二层缓存 1 缓存雪崩定义及解决方案2 为什么要使用多级缓存3 RedisCaffeine实现应用层二级缓存原理4 利用CaffeineRedis解决Redis突然宕机导致的缓存雪崩问题4.1 pom.xml文件引入相关依赖4.2 本地缓存配置类4.3 修改ShopServiceI…

UE5 使用Animation Budget Allocator优化角色动画性能

Animation Budget Allocator是UE内置插件&#xff0c;通过锁定动画系统所占CPU的预算&#xff0c;在到达预算计算量时对动画进行限制与优化。 开启Animation Budget Allocator需要让蒙皮Mesh使用特定的组件&#xff0c;并进行一些编辑器设置即可开启。 1.开启Animation Budget…

Tailwind Starter Kit 一款极简的前端快速启动模板

Tailwind Starter Kit 是基于TailwindCSS实现的一款开源的、使用简单的极简模板扩展。会用Tailwincss就可以快速入手使用。Tailwind Starter Kit 是免费开源的。它不会在原始的TailwindCSS框架中更改或添加任何CSS。它具有多个HTML元素&#xff0c;并附带了ReactJS、Vue和Angul…

k8s中的微服务

一、什么是微服务 用控制器来完成集群的工作负载&#xff0c;那么应用如何暴漏出去&#xff1f;需要通过微服务暴漏出去后才能被访问 Service是一组提供相同服务的Pod对外开放的接口。 借助Service&#xff0c;应用可以实现服务发现和负载均衡。 service默认只支持4层负载均…

二叉树与堆讲解

目录 1.树的概念及结构 1.树的概念 2.树的相关概念 3.树的表示 2.二叉树 1.概念 2.特殊的二叉树 1.满二叉树 2.完全二叉树 3.二叉树的性质 4.二叉树的存储结构 1.顺序结构 2.链式存储 3.堆 1.堆的概念及结构 2.堆的实现 1.堆的创建 2.堆的初始化&#xff08;H…

Spring Boot知识管理:跨平台集成方案

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

STM32 407 RS485通信实现数据收发【我的创作纪念日】

1. 前言 本例中的485驱动&#xff0c;基于标准库编写&#xff0c;不是HAL库&#xff0c;请大家注意。 最近搞嵌入式程序&#xff0c;踩了不少坑&#xff0c;这里统一记录一下。 2. 收获 1.串口通信&#xff0c;数据是一个字节一个字节的发送&#xff0c;对方收到的数据是放在…

【消息队列】Kafka从入门到面试学习总结

国科大学习生活&#xff08;期末复习资料、课程大作业解析、大厂实习经验心得等&#xff09;: 文章专栏&#xff08;点击跳转&#xff09; 大数据开发学习文档&#xff08;分布式文件系统的实现&#xff0c;大数据生态圈学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&…

pandas教程:学习Pandas的教程大纲

以下是一个详细的 Pandas 教程大纲&#xff0c;涵盖从 Pandas 的基础知识到高级功能和应用场景&#xff0c;帮助你系统地学习 Pandas。 1. Pandas 基础概念 1.1 什么是 Pandas 1.2 Pandas 的主要特性 1.3 Pandas 的安装与导入 1.4 数据结构概览 - Series&#xff08;一维&…

小米电机与STM32——CAN通信

背景介绍&#xff1a;为了利用小米电机&#xff0c;搭建机械臂的关节&#xff0c;需要学习小米电机的使用方法。计划采用STM32驱动小米电机&#xff0c;实现指定运动&#xff0c;为此需要了解他们之间的通信方式&#xff0c;指令写入方法等。花了很多时间学习&#xff0c;但网络…

【Next.js 项目实战系列】05-删除 Issue

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c;给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】04-修改 Issue 删除 Issue 添加删除 Button​ 本节代码链接 这里我们主要关注布局…

docker详解介绍+基础操作 (五)容器镜像 导出导入标签

1.镜像导出导入 例&#xff1a;将一台主机的所有镜像传导另一台主机 #方法1 A机器 docker save docker images |awk NR!1{print $1:$2} > backup.tar B机器 scp backuo.tar 10.0.0.200: B机器 docker load < backup.tar#方法2 A机器 docker save docker image ls --fo…

类和对象的认识

类&#xff1a;类是用来描述一个对象的&#xff0c;在java中万物皆对象&#xff0c;通过对类的抽象&#xff0c;类有哪些属性和行为&#xff0c;将这些抽象出来就是类。比如&#xff1a;狗&#xff0c;有名字&#xff0c;年龄&#xff0c;要吃饭的行为等等&#xff0c;将这些动…

仓储管理系统原型图移动端(WMS),出入库管理、库存盘点、库存调拨等(Axure原型、Axure实战项目)

仓储管理系统原型图移动端 Warehouse Management System Prototype 仓储管理系统原型图移动端是一个以图形化方式展示系统移动端界面和功能的原型设计图。原型图展示和说明系统移动端的功能和界面布局&#xff0c;为相关利益方提供一个直观的视觉化展示&#xff0c;帮助他们更…

RAG(检索增强生成)面经(1)

1、RAG有哪几个步骤&#xff1f; 1.1、文本分块 第一个步骤是文本分块&#xff08;chunking&#xff09;&#xff0c;这是一个重要的步骤&#xff0c;尤其在构建与处理文档的大型文本的时候。分块作为一种预处理技术&#xff0c;将长文档拆分成较小的文本块&#xff0c;这些文…

Android中的内容提供者

目录 1.创建内容提供者 1--手动创建一个Android应用程序 2--创建自定义的内容提供者 2.访问其他应用程序 1. 解析URI 2. 查询数据 3. 遍历查询结果 3)案例:读取手机通信录 1.声明权限 2.activity_main.xml文件内容 3.my_phone_list.xml文件内容 4.定义PhoneInfo实体 5.定义MyPh…

线程异步和通信(promise和future)

线程异步和通信&#xff08;promise和future&#xff09; #include <thread> #include <iostream> #include <future> #include <string> using namespace std;void TestFuture(promise<string> p)//线程函数 {cout << "begin TestFu…

Vue 调用电脑摄像头拍照 返回base64格式图片 简单例子

调用电脑摄像头拍照的简单例子&#xff0c;延伸使用可参考往期帖子 戳我传送 <template><div><el-button click"isShow !isShow">{{isShow ? "显示" : "隐藏"}}</el-button><el-button click"OpenCamera&quo…