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);}},
};

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

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

相关文章

SuperMap GIS基础产品桌面GIS FAQ集锦(5)

SuperMap GIS基础产品桌面GIS FAQ集锦&#xff08;5&#xff09; 【iDesktop】【iDesktopX】态势推演怎么使用&#xff1f; 【解决办法】 1、要先新建一个CAD数据集&#xff0c;然后将标绘加到CAD数据集中。 2、再使用态势推演管理器&#xff0c;右键新建分组。 3、选中场景中的…

利用ffmpeg分析视频流

ffprobe -show_packets -i "rtsp://192.168.61.46:8554/live?channel0&type0"&#xff1a;该命令用于显示 RTSP 流中的数据包信息&#xff0c;例如时间戳、大小、持续时间等。 ffprobe -i "rtsp://192.168.61.46:8554/live?channel0&type0"&…

【算法|数组】手撕经典二分法

算法|数组——二分查找 文章目录 算法|数组——二分查找引言二分查找左闭右闭写法左闭右开写法 总结 引言 首先学习这个算法之前需要了解数组知识&#xff1a;数组。 大概介绍以下&#xff1a; 数组是存储在连续内存空间上的相同类型数据的集合。数组下标都是从0开始。数组在…

数学建模—多元线性回归分析(+lasso回归的操作)

第一部分&#xff1a;回归分析的介绍 定义&#xff1a;回归分析是数据分析中最基础也是最重要的分析工具&#xff0c;绝大多数的数据分析问题&#xff0c;都可以使用回归的思想来解决。回归分析的人数就是&#xff0c;通过研究自变量X和因变量Y的相关关系&#xff0c;尝试去解释…

UML 用例图,类图,时序图,活动图

UML之用例图&#xff0c;类图&#xff0c;时序图&#xff0c;活动图_用例图 时序图_siyan985的博客-CSDN博客 https://www.cnblogs.com/GumpYan/p/14734357.html 用例图与类图 - 简书

webshell链接工具-Godzilla(哥斯拉)

项目地址 https://github.com/BeichenDream/Godzilla

势不可挡!新能源车型L2搭载率破50%,TOP20品牌数据出炉

中国乘用车市场正在走出去年的阴霾。 机构公开数据显示&#xff0c;2023年上半年中国乘用车市场产量1100.77万辆&#xff0c;同比增长7.5%&#xff1b;终端销量959.08万辆&#xff0c;同比增长4.7%&#xff1b;乘用车出口152.36万辆&#xff0c;同比增长87.6%。 在实际交付量…

JMeter启动时常见的错误

很多小伙伴在学工具这一块时&#xff0c;安装也是很吃力的一个问题&#xff0c;之前记得有说过怎么安装jmeter这个工具。那么你要启动jmeter的时候&#xff0c;一些粉丝就会碰到如下几个问题。 1.解压下载好的jmeter安装&#xff0c;Windows 平台&#xff0c;双击 jmeter/bin …

中间件RabbitMQ消息队列介绍

1. MQ的相关概念 1.1 什么是MQ MQ&#xff08;message queue&#xff09;&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO先入先出&#xff0c;只不过队列中存放的内容是message而已&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递消息…

protobuf 2定义string常量

背景 protobuf 2中定义的enum枚举值必须为数字类型&#xff0c;故不支持string类型&#xff0c;但有些业务场景又确实需要定义string常量。 目标 在protobuf 2中定义string常量。 方案 思路&#xff1a;通optional default实现string常量。 细节&#xff1a; 1、protobu…

MFC 文件读写包括字符串的结构体

试过CString char* 写入的都是地址 struct Param{int ID;int index;char val[128]; };vector<Param>ans; UINT count 17; ans.resize(count); FILE* fp; fopen_s(&fp,_T("my.txt"),_T("rb")); if(count ! fread(&ans[0],sizeof(Param),cou…

Flink CEP(三)pattern动态更新

线上运行的CEP中肯定经常遇到规则变更的情况&#xff0c;如果每次变更时都将任务重启、重新发布是非常不优雅的。尤其在营销或者风控这种对实时性要求比较高的场景&#xff0c;如果规则窗口过长&#xff08;一两个星期&#xff09;&#xff0c;状态过大&#xff0c;就会导致重启…

【云原生】Docker-Compose全方面学习

目录 1.compose简介 Compose V2 2.compose安装与下载 二进制包 PIP 安装 bash 补全命令 卸载 3.docker compose管理命令 命令对象与格式 命令选项 命令使用说明 1.compose简介 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose&#xff0c;您可…

stm32和python串口数据收发

0 串口基础配置&#xff08;stm32F103&#xff09; void uart_init(u32 bound){//GPIO端口设置GPIO_InitTypeDef GPIO_InitStructure;USART_InitTypeDef USART_InitStructure;NVIC_InitTypeDef NVIC_InitStructure;RCC_APB2PeriphClockCmd(RCC_APB2Periph_USART1, ENABLE); //…

Acwing.883 高斯消元解线性方程组

题目 输入一个包含n个方程n个未知数的线性方程组。 方程组中的系数为实数。 求解这个方程组。 下图为一个包含m个方程n个未知数的线性方程组示例: 输入格式 第一行包含整数n。 接下来n行&#xff0c;每行包含n1个实数&#xff0c;表示一个方程的n个系数以及等号右侧的常数。 …

《向量数据库指南》——Rockset 为实时数据库添加向量嵌入支持(一)

同样,Venkataramani——除了是 Rockset 的联合创始人外,还担任首席执行官——表示,增加对向量嵌入的支持的关键方面是供应商现在使用户能够在一个位置管理和探索所有类型的数据。 “一个单一的数据库现在可以存储你的结构化数据、半结构化数据和你的向量嵌入来构建丰富的…

‘vue’不是内部或外部命令,也不是可运行的程序或批处理文件的原因及解决方法

今天我在用node.js的时候&#xff0c;结果出现如下错误&#xff1a; C:\Users\xiesj> vue -v vue不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 原因&#xff1a; 1、确定npm是否已正确安装&#xff1f; 2、确定vue以及vue-cli已正确安装&#xff1f;…

记录线上一次mysql只能查询,不能插入或更新的bug

错误复现 突然有一天产品通知xx服务不可用&#xff0c;想着最近也没有服务更新&#xff0c;就先排查一下服务日志 使用postman测试的时候请求明显超时&#xff0c;查看日志显示是一个锁的问题 使用工具连接到mysql&#xff0c;查看information_schema.INNODB_TRX,发现有一个事…

Bean 和 static的区别

Bean 和 Static Static 没有办法控制在多个并发请求的时候&#xff0c;只生成一个实例。有多少个请求就会生成多少个 实例&#xff0c;那么此时如果用 Bean的方式来注解&#xff0c;就会启用SpringBoot中的单例模式&#xff0c;从始至终都只有一个实例 静态方法我们都知道&am…

Java HTTP client常见库

前言 每种编程语言里最常用的库恐怕是Http请求库了&#xff0c;如python里的requests包&#xff0c;nodejs里的request模块。 在Java世界里&#xff0c;也是百花齐放&#xff0c;山头林立。常用的有&#xff1a; HttpURLConnection: 最早的JDK提供的类Java 11提供的HttpClien…