做网站什么框架比较好/市场调研报告范文模板word
先说一下我这边的需求是视频需要轮播,一个人员有多个视频,左右轮播是轮播某个人员下的视频,上下切换是切换人员。
vue 代码
<el-carouselindicator-position="none"ref="carousel"arrow="always":interval="10000"@change="carouselChange"><transition name="carousel-arrow-right"><buttontype="button"@click="arrowDown('top')"class="el-carousel__arrow el-carousel__arrow--right el-carousel__arrow--top"><i class="el-icon-arrow-up"></i></button></transition><transition name="carousel-arrow-right"><button@click="arrowDown('bottom')"type="button"class="el-carousel__arrow--bottom"><i class="el-icon-arrow-down"></i></button></transition><!-- --><el-carousel-itemv-for="(item, index) in videoUrl":key="index"v-loading="loading"element-loading-spinner=" "element-loading-background="rgba(0, 0, 0, 0.8)"@mouseenter.native="autoplayHandler"><template v-if="isPlayer"><div style="margin: 5px 0">{{ '张三' }}</div><div style="width: 100%; height: 76%" id="video-box"><video:id="`my-video${index}`"class="video-js vjs-default-skin"controlspreload="auto"><source :src="item.monitorUrl" type="application/x-mpegURL" /></video></div></template></el-carousel-item></el-carousel>
js代码:
export default {data() {return {videoUrl: [],arr: [{name: "张三",videoUrlList: [{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},],},{name: "李四",videoUrlList: [{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},],},],selectionObj:{},DownIndex: 0,player: [],isPlayer: true,};},mounted() {let _that = this;//默认取第一个_that.selectionObj=arr[0]setTimeout(() => {_that.getVideo();}, 6000);},//销毁事件beforeDestroy() {this.clearVideo();},methods: {//销毁视频clearVideo() {if (this.player != null) {for (let i = 0; i < this.player.length; i++) {this.player[i].dispose(); //dispose()是官方的销毁函数}}},//初始化getVideo() {const _this = this;//判断视频是否存在如果存在不需要重新初始化if(_this.player.length!=0) returnthis.videoUrl.map((item,index) => {let player = videojs(`my-video${index}`,{bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true,// restoreEl: true,autoplay: true, //是否自动播放muted: true, //静音模式 、、 解决首次页面加载播放},function () {// this.reset()//视频中重置方法 this.load();//刷新视频地址_this.player.push(player);//player是一个空数组 存放实例化的视频实例});});},//监控上下切换arrowDown(type) {//点切换是销毁视频this.clearVideo();this.isPlayer = false; //切换后const arr= this.arr;const index =type == "top"? this.DownIndex == 0? this.arr.length - 1: this.DownIndex - 1: this.DownIndex == this.arr.length - 1? 0: this.DownIndex + 1;this.DownIndex = index;this.$nextTick(() => {this.canteenObj = {};this.videoUrl = [];if (arr&& arr[this.DownIndex].videoUrlList) {this.selectionObj= canteenList[this.DownIndex];this.videoUrl = canteenList[this.DownIndex].videoUrlList;// this.loading = true;this.isPlayer = true; //切换后}//切换到轮播第一页this.$refs.carousel.setActiveItem(0);// videoBox.load()this.carouselChange(0);// this.getVideo(index);});},//监控视频切换播放carouselChange(index) {// returnsetTimeout(() => {this.isPlayer = true;this.getVideo(index);}, 6000);},// 轮播图鼠标移入清除时间函数autoplayHandler(index) {this.$refs.carousel.pauseTimer();},}}
样式:
<style scoped>
>>> .el-carousel,
>>> .el-carousel__container {height: 100%;
}
>>> .video-js {height: calc(100% - 6px);width: 100%;
}
.el-carousel__arrow--top {top: 0px;left: 46%;transform: translate(-50%, 0);
}
.el-carousel__arrow--bottom {bottom: 5px;position: absolute;left: 50%;height: 36px;width: 36px;border-radius: 50%;background-color: rgba(31, 45, 61, 0.11);color: #ffffff;border: none;outline: none;z-index: 10;transform: translate(-50%, 0);
}
</style>
实现效果图:
相关文章:

vue video 多个视频切换后视频不显示的解决方法
先说一下我这边的需求是视频需要轮播,一个人员有多个视频,左右轮播是轮播某个人员下的视频,上下切换是切换人员。 vue 代码 <el-carouselindicator-position"none"ref"carousel"arrow"always":interval&qu…...

多态与代码屎山
到底什么是多态呢?多态是面向未来的,比如企业采购为例: 一般分为线上合线下两种, 我们设计一个父类叫做"采购", 里面做一些共通的处理: 申请, 承认, 支付, 购买方式. 然后让各自的子类(线上,线下)实现自己的方法.实际调用过程中传入不同的对象就可以.到此为止项目开…...

Git基本操作(2)
Git基本操作(2) 上交文件之后,git文件的变化git cat-file HEAD指针里面有啥文件被修改git statusgit diff 文件名 版本回退(git reset)撤销回退git reflog 撤销的三种情况还没有addgit checkout -- [file] 已经add还没…...

编程笔记 Golang基础 023 切片
编程笔记 Golang基础 023 切片 一、切片二、定义与初始化三、基本操作四、示例 Go语言中的切片(slices)是基于数组的抽象数据类型,它提供了一种灵活的方式来处理可变长度的数据序列。切片本身不存储任何数据,而是指向底层数组的一…...

qt 软件发布(Windows)
1. 开发环境 QtCreator MSVC编译器 2. 源码编译 生成release或者debug版本的exe可执行文件(x64或x86) 3. windeployqt 打包 ①左下角开始菜单栏找到QT的命令交互对话框,如下图MSVC 2017 64-bit(根据第二步编译的类型选择64位或者32位)。 ②cd 切换到第二步可…...

《汇编语言》- 读书笔记 - 第11章-标志寄存器
《汇编语言》- 读书笔记 - 第11章-标志寄存器 标志寄存器指令与标志位关系11.1 ZF(Zero Flag,零标志位)11.2 PF(Parity Flag,奇偶标志位)11.3 SF(Sign Flag,符号标志位)处…...

1.QT简介(介绍、安装,项目创建等)
1. QT介绍 Qt(官方发音 [kju:t])是一个跨平台的C开发库,主要用来开发图形用户界面(Graphical User Interface,GUI)程序 Qt 是纯 C 开发的,正常情况下需要先学习C语言、然后在学习C然后才能使用…...

【服务器】服务器推荐
一、引言 在数字世界的浪潮中,服务器作为数据存储和处理的基石,其重要性不言而喻。而在这个繁星点点的市场中,雨云以其独特的优势和超高的性价比,逐渐成为众多企业和个人的首选。今天,就让我带你走进雨云的世界&#…...

信号系统之线性图像处理
1 卷积 图像卷积的工作原理与一维卷积相同。例如,图像可以被视为脉冲的总和,即缩放和移位的delta函数。同样,线性系统的特征在于它们如何响应脉冲。也就是说,通过它们的脉冲响应。系统的输出图像等于输入图像与系统脉冲响应的卷积…...

uniapp腾讯地图JavaScript Api,H5端和原生APP端可用
因项目需要,在uniapp中集成使用腾讯地图,为了方便维护,希望通过一套代码实现H5和APP同时可用。H5显示相对简单,APP端比较麻烦,记录下实现过程 一、集成步骤 1.使用 renderjs script标签使用renderjs,因为…...

MyBatisPlus:PG数组类型自动映射问题
引言: PostGreSQL数据库提供了丰富的数据类型,通过查看官网文档,我们也可以发现,PG也提供了对数组类型的支持。 但是在实际开发中,我们通常是使用MyBatis/MyBatisPlus这种半自动ORM映射框架来实现数据库/表数据基本的增删改查,以及其它操作。那么,问题来了,如何…...

Data-Shape制作UI节点简介
很多小伙伴对于Data-Shape制作简单的UI都是似懂非懂,群里很多小伙伴也总是询问相关的问题,那么,今天我就简单举几个例子,专门介绍下Data-Shape创建简单UI的教程。 首先,本次教程,使用的是Data-Shape 2021.…...

kubernetes负载均衡部署
目录 1.新master节点的搭建 对master02进行初始化配置(192.168.88.31) 将master01的配置移植到master02 修改master02配置文件 2.负载均衡的部署 两台负载均衡器配置nginx 部署keepalived服务 所有node节点操作 总结 实验准备: k8s…...

NestJS入门6:日志中间件
前文参考: NestJS入门1 NestJS入门2:创建模块 NestJS入门3:不同请求方式前后端写法 NestJS入门4:MySQL typeorm 增删改查 NestJS入门5:加入Swagger 1. 安装 nest g middleware logger middleware 2. lo…...

CommonJS、require、moudle实现两个文件传参
目的:实现两个文件传参 文件A给B传入一个参数,并且文件B代码执行后再传回A。 场景 拆分express项目中的app.js文件中的路由、项目越大会使app.js文件变大,复杂 如何使用 app.js文件 导入路由文件调用路由文件,调用的时候传入…...

关于php、php-fpm的解释
PHP语言是由PHP程序解释的,而不是由php-fpm程序解释的。 PHP(Hypertext Preprocessor)是一种通用开源脚本语言,最初是为创建动态Web页面而设计的,但现在也可以用于命令行脚本编写等用途。PHP程序通常由Web服务器&…...

【CMake】(8)包含库文件
示例项目结构 假设你的项目结构如下所示: 项目根目录/ ├── CMakeLists.txt ├── include/ │ └── head.h ├── lib/ │ └── libcalc.a └── src/└── main.cpp链接库 link_directories和target_link_libraries指令用于配置和链接库文件。 link_direc…...

【 JS 进阶 】Web APIs (二)
“人生如舞台,每一个瞬间都是一场精彩的表演。在舞台的灯光下,以坚韧为舞伴,跳出自己的独特舞步,创造属于自己的绚丽人生芳华。” - 露易丝梭罗 学习会为 DOM 注册事件,实现简单可交互的网页特交。 事件是编程语言中的…...

解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)
案例: <view class"abc"><view class"abc-item" v-for"(item,index) in 8" :key"index">看我</view> </view> <style lang"less">.abc{height: 100px;display: flex;flex-wrap: …...

什么是负载均衡集群?
目录 1、集群是什么? 2、负载均衡集群技术 3、负载均衡集群技术的实现 4、实现效果如图 5、负载均衡分类 6、四层负载均衡(基于IP端口的负载均衡) 7、七层的负载均衡(基于虚拟的URL或主机IP的负载均衡) 8、四层负载与七层…...

【es6】的新特性
声明语法 letconstclass字符串/函数/对象/数组的新语法/扩展功能模版字符串 反引号标签函数Proxy /ReflectPromiseclsss & static 静态方法 & extends 继承SetMapSymbolfor of 可迭代对象迭代器模式 通过 Symbol.interator 对外提供统一个接口外部可以通过 for...of 去…...

Java中的多线程是如何实现的?
在Java中,多线程的实现主要依赖于java.lang.Thread类和java.util.concurrent包中的类。以下是Java实现多线程的基本方法和概念: 1. **继承Thread类:** - 创建一个新的类继承自Thread类。 - 重写Thread类的run()方法,定义线…...

C++知识点总结(22):模拟算法
一、概念 模拟算法 根据题目描述进行筛选提取关键要素,按需求书写代码解决实际问题的算法。 二、步骤 1、提取题目的关键要素 2、根据关键要素的需求完成代码 三、关键要素 1、题目目的 2、样例的执行逻辑(样例分析) 3、数据范围(…...

opengl 学习纹理
一.纹理是什么? 纹理是一个2D图片(甚至也有1D和3D的纹理),它可以用来添加物体的细节;类似于图像一样,纹理也可以被用来储存大量的数据,这些数据可以发送到着色器上。 采样是指用纹理坐标来获取纹…...

STM32控制max30102读取血氧心率数据(keil5工程)
一、前言 MAX30102是一款由Maxim Integrated推出的低功耗、高精度的心率和血氧饱和度检测传感器模块,适用于可穿戴设备如智能手环、智能手表等健康管理类电子产品。 该传感器主要特性如下: (1)光学测量:MAX30102内置…...
高级语言期末2011级A卷
1.编写函数,判定正整数m和n(均至少为2)是否满足:数m为数n可分解的最小质因数(数n可分解的最小质因数为整除n的最小质数) 提示:判定m为质数且m是n的最小因数 #include <stdio.h> #include…...

SpringAMQP消息队列
引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>配置文件 spring:rabbitmq:host: 172.27.99.52 # rabbitMQ的ip地址port: 5672 # 端口username: abcpa…...

二次元风格个人主页HTML源码
源码介绍 直接上传服务器压缩包解压就完事了,修改index.html内代码即可,注释写的很全,替换图片在文件夹img,只有前端,没有后台,大佬如果需要,可以自行添加后台。本源码非常适合个人工作室主页。…...

每日学习录
目录 [蓝桥杯 2022 省 A] 求和 题目描述 [蓝桥杯 2019 省 B] 特别数的和 题目描述 [蓝桥杯 2023 省 A] 填空问题 题目描述 [蓝桥杯 2020 省 AB1] 走方格 题目描述 [蓝桥杯 2017 省 AB] 分巧克力 [蓝桥杯 2016 省 B] 交换瓶子 题目描述 [蓝桥杯 2022 省 A] 求和 题目描…...

linux docker部署深度学习环境(docker还是conda)
在深度学习中,避免不了在远程服务器上进行模型的训练,如果直接在服务器裸机的基础环境跑显然是不可取的,此时搭建用于模型训练的docker环境显得尤为重要。 在深度学习中,避免不了在远程服务器上进行模型的训练,如果直…...