当前位置: 首页 > news >正文

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​&#xff0c;你可以从中删除一些数&#xff0c;使得删完以后的序列中&#xff0c;所有相邻元素之和均为偶数。请问最少需要删除多少个数&#xff1f; 输入格式 第一行…...

Java try-with-resources 显性 与 隐性 关闭 资源

try-with-resources 是 Java 7 引入的一个语言特性&#xff0c;用于简化资源管理的代码&#xff0c;特别是在处理需要关闭的资源&#xff08;如文件、网络连接、数据库连接等&#xff09;时。try-with-resources 允许您在 try 语句中声明需要关闭的资源&#xff0c;这些资源会在…...

Vue在页面输出JSON对象,测试接口可复制使用

效果图&#xff1a; 数据处理前&#xff1a; 数据处理后&#xff1a; 代码实现&#xff1a; HTML: <el-table height"600" :data"tableData" border style"width: 100%" tooltip-effect"dark" size"mini"><el-…...

【STM32】FreeRTOS开启后,不再进入主函数的while(1)

开启freertos后&#xff0c;想在主函数的while(1)中实现led的翻转&#xff0c;发现无法实现。 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("输入的内容") &#xff08;输入文字&#xff09; 2、clear() (清除元素内的内容) 3、click()&#xff08;点击元素&#xff09; 4、quit()关闭浏览器 5、refresh()&#xff08;刷新浏览器页面&#xff09; 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&#xff0c;value实现的&#xff0c;这里的数据结构指的是value有不同的类型。 当前版本Redis支持10种数据类型&#xff0c;下面介绍常用的五种数据类型 底层编码 Redis在实现上述数据结构时&#xff0c;会在源码有特定的…...

大数据-玩转数据-Flink-Transform

一、Transform 转换算子可以把一个或多个DataStream转成一个新的DataStream.程序可以把多个复杂的转换组合成复杂的数据流拓扑. 二、基本转换算子 2.1、map&#xff08;映射&#xff09; 将数据流中的数据进行转换, 形成新的数据流&#xff0c;消费一个元素并产出一个元素…...

Java泛型集合简明教程

前言 我们编写一个数组并对数组进行排序&#xff0c;不管是对浮点型数组、整型数组、字符串数组或者是其他任何类型的数组进行排序&#xff0c;我们可以利用方法重载的方式&#xff0c;针对每种类型的数组分别编写一个排序方法&#xff0c;需要为几种类型的数组排序&#xff0…...

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的数据&#xff0c;并且实时的存储到iceberg中。好处是可以一边存数据&#xff0c;一边查询数据。当然使用clickhouse也可以实现数据的既存既取。而hive数据既存既读则会有问题。iceberg中数据读写数据都是从快照中开始的&#xff0c;读和写对…...

文章二:分支管理策略 - 分支玩转:Git分支管理实战

开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun 概述 在软件开发中&#xff0c;版本控制是一项至关重要的工作。Git作为目前最受欢迎的分布式版本控制系统&…...

JS dom元素和鼠标位置之间的一系列属性快速参考

clientHeight 获取对象的高度&#xff0c;不计算任何边距、边框、滚动条&#xff0c;但包括该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 clie…...

【剑指 Offer 39】数组中超过一半的数字

题目&#xff1a; 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例&#xff1a; 输入: [1, 2, 3, 2, 2, 2, 5, 4, 2] 输出: 2 思考&#xff1a; 方法一&#xff1a;投…...

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…...

手机里视频太大怎么压缩?压缩教程分享

现在视频文件的体积越来越大了&#xff0c;动不动就是几个GB起步&#xff0c;如果后期再剪辑处理一下&#xff0c;更是会占据更多的设备空间了&#xff0c;还会导致我们传输受到限制&#xff0c;这时候就需要我们对视频进行压缩处理&#xff0c;下面给大家分享几个简单的方法&a…...

Spring-Cloud-Loadblancer详细分析_3

前两篇文章介绍了加载过程&#xff0c;本文从Feign的入口开始分析执行过程&#xff0c;还是从FeignBlockingLoadBalancerClient.execute来入手 public class FeignBlockingLoadBalancerClient implements Client {private static final Log LOG LogFactory.getLog(FeignBlock…...

使用 VScode 开发 ROS 的Python程序(简例)

一、任务介绍 本篇作为ROS学习的第二篇&#xff0c;是关于如何在Ubuntu18.04中使用VSCode编写一个Python程序&#xff0c;输出“Hello&#xff01;”的内容介绍。 首先我们来了解下ROS的文件系统&#xff0c;ROS文件系统级指的是在硬盘上ROS源代码的组织形式&#xff0c;其结构…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...