vue 使用vue-video-player加载视频(铺满容器)
vue 使用vue-video-player加载视频(铺满容器)
- 安装
npm install vue-video-player --save
- main.js 引入
import VideoPlayer from "vue-video-player"
import "video.js/dist/video-js.css"
import "vue-video-player/src/custom-theme.css"
import "videojs-flash"
Vue.use(VideoPlayer)
- 使用
<!-- 循环创建了四个视频 -->
<divclass="spItemBox"v-for="(item, i) in videoList":key="i"><video-playerstyle="width: 100%; height: 100%; object-fit: fill"class="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions[i]"></video-player></div>
export default {data() {return {playerOptions: [],videoList: [{}, {}, {}, {}],};},mounted() {for (let index = 0; index < 4; index++) {let url = require("../../../../../assets/videos/video1.mp4"); // 测试视频urlconst obj = {// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度autoplay: false, //如果true,浏览器准备好时开始回放。muted: true, // 默认情况下将会消除任何音频。loop: true, // 导致视频一结束就重新开始。preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)language: "zh-CN",aspectRatio: "14:6", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。sources: [{type: "video/mp4", //这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目src: url, //url地址},],poster: "", //你的封面地址// width: document.documentElement.clientWidth, //播放器宽度notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: false,durationDisplay: false,remainingTimeDisplay: false,fullscreenToggle: false, //全屏按钮},};this.playerOptions.push(obj);}},
};
- 使视频铺满容器
/deep/ .video-js {height: 100%;
}
/deep/ .video-js .vjs-tech {object-fit: fill;
}
/deep/ .vjs-poster {background-size: cover;
}
相关文章:
vue 使用vue-video-player加载视频(铺满容器)
vue 使用vue-video-player加载视频(铺满容器) 安装 npm install vue-video-player --savemain.js 引入 import VideoPlayer from "vue-video-player" import "video.js/dist/video-js.css" import "vue-video-player/src/custom-theme.css" i…...
OpenCV(三)——图像分割(三)
目录 6.区域生长算法 6.1 区域生长概要 6.2 区域生长原理 7.分水岭算法 7.1 分水岭算法概要...
数论复习c++
改造序列 题目描述 给定长度为 n n n的序列 a 1 , a 2 , . . . , a n a_1,a_2,...,a_n a1,a2,...,an,你可以从中删除一些数,使得删完以后的序列中,所有相邻元素之和均为偶数。请问最少需要删除多少个数? 输入格式 第一行…...
Java try-with-resources 显性 与 隐性 关闭 资源
try-with-resources 是 Java 7 引入的一个语言特性,用于简化资源管理的代码,特别是在处理需要关闭的资源(如文件、网络连接、数据库连接等)时。try-with-resources 允许您在 try 语句中声明需要关闭的资源,这些资源会在…...
Vue在页面输出JSON对象,测试接口可复制使用
效果图: 数据处理前: 数据处理后: 代码实现: HTML: <el-table height"600" :data"tableData" border style"width: 100%" tooltip-effect"dark" size"mini"><el-…...
【STM32】FreeRTOS开启后,不再进入主函数的while(1)
开启freertos后,想在主函数的while(1)中实现led的翻转,发现无法实现。 int main(void) {/* USER CODE BEGIN 1 *//* USER CODE END 1 *//* MCU Configuration--------------------------------------------------------*//* Reset of all peripherals, …...
Python+Selenium+Unittest 之selenium11--WebDriver操作方法1-常用操作
目录 1、send_keys("输入的内容") (输入文字) 2、clear() (清除元素内的内容) 3、click()(点击元素) 4、quit()关闭浏览器 5、refresh()(刷新浏览器页面) 6、set_window_size()和用 maxim…...
气液固三相线识别—Langmuir部分复现
关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material...
Redis——常见数据结构与单线程模型
Redis中的数据结构 Redis中所有的数据都是基于key,value实现的,这里的数据结构指的是value有不同的类型。 当前版本Redis支持10种数据类型,下面介绍常用的五种数据类型 底层编码 Redis在实现上述数据结构时,会在源码有特定的…...
大数据-玩转数据-Flink-Transform
一、Transform 转换算子可以把一个或多个DataStream转成一个新的DataStream.程序可以把多个复杂的转换组合成复杂的数据流拓扑. 二、基本转换算子 2.1、map(映射) 将数据流中的数据进行转换, 形成新的数据流,消费一个元素并产出一个元素…...
Java泛型集合简明教程
前言 我们编写一个数组并对数组进行排序,不管是对浮点型数组、整型数组、字符串数组或者是其他任何类型的数组进行排序,我们可以利用方法重载的方式,针对每种类型的数组分别编写一个排序方法,需要为几种类型的数组排序࿰…...
Prometheus-RabbitMQ Exporter
文章目录 一、介绍监控插件两个插件的区别一、 官方插件 rabbitmq_prometheus1 配置 RabbitMQ 集群名称2 授权使用插件2.1 配置文件方式2.2 命令行方式3 监听地址和端口4 RabbitMQ 插件获取指标的频率5 配置到 Prometheus6 关于聚合指标和每个对象指标6.1 获取聚合指标 `/metri…...
flink读取kafka数据存储iceberg
1、说明 使用flink实时的读取kafka的数据,并且实时的存储到iceberg中。好处是可以一边存数据,一边查询数据。当然使用clickhouse也可以实现数据的既存既取。而hive数据既存既读则会有问题。iceberg中数据读写数据都是从快照中开始的,读和写对…...
文章二:分支管理策略 - 分支玩转:Git分支管理实战
开始本篇文章之前先推荐一个好用的学习工具,AIRIght,借助于AI助手工具,学习事半功倍。欢迎访问:http://airight.fun 概述 在软件开发中,版本控制是一项至关重要的工作。Git作为目前最受欢迎的分布式版本控制系统&…...
JS dom元素和鼠标位置之间的一系列属性快速参考
clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 clie…...
【剑指 Offer 39】数组中超过一半的数字
题目: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字。 你可以假设数组是非空的,并且给定的数组总是存在多数元素。 示例: 输入: [1, 2, 3, 2, 2, 2, 5, 4, 2] 输出: 2 思考: 方法一:投…...
list.stream.filter,List<List>转换为List
1.filter过滤 返回符合查询条件的集合//过滤所有deviceType为1的List<DeviceWorkTimeEntity> list entities.stream().filter(a -> "1".equals(a.getDeviceType())).toList(); 2.List<List>转换为List 可以使用流(Stream)的flatMap操作 public cl…...
手机里视频太大怎么压缩?压缩教程分享
现在视频文件的体积越来越大了,动不动就是几个GB起步,如果后期再剪辑处理一下,更是会占据更多的设备空间了,还会导致我们传输受到限制,这时候就需要我们对视频进行压缩处理,下面给大家分享几个简单的方法&a…...
Spring-Cloud-Loadblancer详细分析_3
前两篇文章介绍了加载过程,本文从Feign的入口开始分析执行过程,还是从FeignBlockingLoadBalancerClient.execute来入手 public class FeignBlockingLoadBalancerClient implements Client {private static final Log LOG LogFactory.getLog(FeignBlock…...
使用 VScode 开发 ROS 的Python程序(简例)
一、任务介绍 本篇作为ROS学习的第二篇,是关于如何在Ubuntu18.04中使用VSCode编写一个Python程序,输出“Hello!”的内容介绍。 首先我们来了解下ROS的文件系统,ROS文件系统级指的是在硬盘上ROS源代码的组织形式,其结构…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林:一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好,未来的算法大神! 在数据结构的世界里,“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的,它…...
6.9-QT模拟计算器
源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...
客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场,但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大,传统架构已较难满足当前企业发展的需求,企业面临着三重挑战: ① 业务:国内用户访问海外服…...
智警杯备赛--excel模块
数据透视与图表制作 创建步骤 创建 1.在Excel的插入或者数据标签页下找到数据透视表的按钮 2.将数据放进“请选择单元格区域“中,点击确定 这是最终结果,但是由于环境启不了,这里用的是自己的excel,真实的环境中的excel根据实训…...
STM32 低功耗设计全攻略:PWR 模块原理 + 睡眠 / 停止 / 待机模式实战(串口 + 红外 + RTC 应用全解析)
文章目录 PWRPWR(电源控制模块)核心功能 电源框图上电复位和掉电复位可编程电压监测器低功耗模式模式选择睡眠模式停止模式待机模式 修改主频一、准备工作二、修改主频的核心步骤:宏定义配置三、程序流程:时钟配置函数解析四、注意…...
