vue中实现视频播放

一:方法一

main.js中引入并且定义全局变量

//Video.js 视频配件
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
import * as echarts from 'echarts'  //引入Echarts,
Vue.prototype.$echarts = echarts  //定义为全局变量
//通过相对路径来引入<el-row :gutter="30"><el-col :span="20" :offset="1"><el-card class="box-card"><div class="video-player vjs-custom-skin"><video id="myVideo" class="video-js" :playsinline="false"><source src="../../../assets/images/1.mp4" type="video/mp4" ></video></div></el-card></el-col></el-row>//绝对路径引入需要把文件放在public下<el-row :gutter="30"><el-col :span="20" :offset="1"><el-card class="box-card"><div class="video-player vjs-custom-skin"><video id="myVideo" class="video-js" :playsinline="false"><source src="/1.mp4" type="video/mp4" ></video></div></el-card></el-col></el-row>
export default {name: "TestTwo",data() {return {};},mounted() {this.initVideo();},methods: {initVideo() {//初始化视频方法let myPlayer = this.$video(myVideo, {//确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。controls: true,volume: 0.1,playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度//自动播放属性,muted:静音播放autoplay: "muted",// autoplay: "true",//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。preload: "auto",//设置视频播放器的显示宽度(以像素为单位)width: "500px",//设置视频播放器的显示高度(以像素为单位)height: "310px",language: "zh-CN",aspectRatio: "9:6", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。});},},

方法二:通过自带的库来实现

    <el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="视频" align="center" prop="url"><template slot-scope="scope"><video  controls id="video-class":src="scope.row.url"></video></template>//例如:https:localhost:8080/加你本地配置的路径export default {name: "TestTwo",data() {return {videoList: []};},methods: {/** 查询视频播放列表 */getList() {this.loading = true;listVideo(this.queryParams).then(response => {this.videoList = response.rows;this.total = response.total;this.loading = false;});},

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

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

相关文章

【LeetCode】200.岛屿数量

题目 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此外&#xff0c;你可以假设该网格的…

【机器学习】Overfitting and Regularization

Overfitting and Regularization 1. 过拟合添加正则化2. 具有正则化的损失函数2.1 正则化线性回归的损失函数2.2 正则化逻辑回归的损失函数 3. 具有正则化的梯度下降3.1 使用正则化计算梯度&#xff08;线性回归 / 逻辑回归&#xff09;3.2 正则化线性回归的梯度函数3.3 正则化…

解决python-opencv:(-215:Assertion failed) _img.empty() in function ‘cv::imwrite‘在将视频分成帧图片,写入时出现的问题

最近在搞视频检测问题&#xff0c;在用到将视频分帧保存为图片时&#xff0c;图片可以保存&#xff0c;但是会出现(-215:Assertion failed) !_img.empty() in function cv::imwrite问题而不能正常运行&#xff0c;在检查代码、检查路径等措施均无果后&#xff0c;了解了视频分帧…

linux实现运行java分包部署

1.打好包之后 找到bin文件夹下的 startup.sh文件 2.cd 进入bin文件夹下 3.执行 sh startup.sh 运行命令 4.如果出现此错误 是Windows和Linux的.sh脚本文件格式不同&#xff0c;如果在脚本中有空行&#xff0c;脚本是在Windows下进行编辑之后上传到linux上去执行的话&#xff0c…

探究HTTP代理爬虫的反爬虫策略

在当前信息爆炸的时代&#xff0c;海量的数据成为了企业发展和决策的关键资源。然而&#xff0c;越来越多的网站为了保护数据和用户隐私的安全&#xff0c;采取了各种反爬虫策略。作为一家专业的HTTP代理产品供应商&#xff0c;我们一直在研究和优化反爬虫策略&#xff0c;为用…

JVM系统优化实践(23):GC生产环境案例(6)

您好&#xff0c;这里是「码农镖局」CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e; 在互联网大厂中&#xff0c;对每天亿级流量的日志进行清洗、整理是非常常见的工作。在某个系统中&#xff0c;需要对用户的访问日志做脱敏处理&#xff0c;也就是清洗掉姓名…

fwft fifo和standard fifo

fifo共有两种,分别是standard fifo和fwft fifo,其中,前者的latency=1,即rd_en信号有效且fifo非空时,数据会在下一个周期出现在fifo的读数据端口。而后者,即fwft fifo的latency=0,也就是说,rd_en信号有效的当拍,数据就会出现在读端口上。这里,fwft是First-word-Fall-T…

【Spring Cloud】Gateway的配置与使用

文章目录 前言第一步&#xff0c;创建一个springboot工程第二步&#xff0c;添加依赖第三步&#xff0c;编写yml文件第四步&#xff0c;启动主启动类总结 前言 Gateway其实是springcloud 原生的东西&#xff0c;但是我还是想放在这里讲&#xff0c;因为我们使用nacos时&#x…

IPsec VPN小实验

IPSec 是什么&#xff1a; IPSec是一个框架&#xff0c;它不是具体指某个协议&#xff0c;而是定义了一个框架&#xff0c;由各种协议组和协商而成。该框架涉及到的主要有加密算法、验证算法、封装协议、封装模式、密钥有效期等等。 IPSecVPN建立的前提&#xff1a;要想在两个…

【Lua学习笔记】Lua进阶——垃圾回收

按照唐老师的课程本来要讲自带库的&#xff0c;但是想想这东西能看文档&#xff0c;ctrl左键还能看注解&#xff0c;并且最重要的许多自带库的方法基本大部分语言都有&#xff0c;其实看看就能懂了。所以还是重点讲讲垃圾回收 文章目录 GC辅助垃圾回收collectgarbage增量模式分…

Elasticsearch Query DSL

Elasticsearch Query DSL 这里使用的 Elasticsearch 的版本为 7.12.1。 1、基本概念 1.1 文档(Document) ElasticSearch 是面向文档的&#xff0c;文档是所有可搜索数据的最小单位&#xff0c;例如 MySQL 的一条数据记录。 文档会被序列化成为 json 格式&#xff0c;保存在…

iPhone 安装 iOS 17公测版(Public Beta)

文章目录 步骤1. 备份iPhone资料步骤2. 申请iOS 17 公测Beta 资格步骤3. 下载iOS 16 Beta 公测描述档步骤4. 选择iOS 17 Beta 公测描述档更新项目步骤5. 升级iOS 17 Public Beta 公开测试版 苹果已经开始向大众释出首个iOS 17 公开测试版/ 公测版( iOS 17 Public Beta)&#xf…

测试|Selenium之WebDriver常见API使用

测试|Selenium之WebDriver常见API使用 文章目录 测试|Selenium之WebDriver常见API使用1.定位对象&#xff08;findElement&#xff09;css定位xpath定位css选择器语法&#xff1a;xpath语法:校验结果 2.操作对象鼠标点击对象在对象上模拟按键输入clear清除对象输入的文本内容su…

【Python】Web学习笔记_flask(1)——getpost

flask提供的request请求对象可以实现获取url或表单中的字段值 GET请求 从URL中获取name、age两个参数 from flask import Flask,url_for,redirect,requestappFlask(__name__)app.route(/) def index():namerequest.args.get(name)agerequest.args.get(age)messagef姓名:{nam…

[css]margin-top不起作用问题(外边距合并)

在初学css时&#xff0c;会遇到突然间margin-top不起作用的情况。如下面&#xff1a; 情况一&#xff1a; 代码&#xff1a; <html> <head><style type"text/css"> * {margin:0;padding:0;border:0; }#outer {width:300px;height:300px;backgroun…

ifcfg-ens33中的ONBOOT字段是什么作用?

在CentOS或其他基于Red Hat Enterprise Linux (RHEL)的Linux发行版中&#xff0c;ifcfg-ens33是网络配置文件&#xff0c;用于配置网卡设备ens33的网络参数。ifcfg-ens33文件位于/etc/sysconfig/network-scripts/目录下&#xff08;可能因系统版本而略有不同&#xff0c;例如/e…

Elasticsearch Java客户端和Spring data elasticsearch

文章目录 官网版本组件版本说明实现代码地址es Spring Data Repositories例子&#xff1a;ElasticsearchRepository分析 es Spring Data Repositories 关键字es Spring Data Repositories client 加载rest风格客户端直接执行dsl例子响应式客户端-ReactiveElasticsearchClientpo…

打卡力扣题目七

#左耳听风 ARST 打卡活动重启# 目录 一、题目 二、解题方法一 三、解题方法二 关于 ARTS 的释义 —— 每周完成一个 ARTS&#xff1a; ● Algorithm: 每周至少做一个 LeetCode 的算法题 ● Review: 阅读并点评至少一篇英文技术文章 ● Tips: 学习至少一个技术技巧 ● Share:…

【MTK平台】【wpa_supplicant】关于wpa_supplicant_8/src/p2p/p2p_go_neg.c文件的介绍

本文主要介绍external/wpa_supplicant_8/src/p2p/p2p_go_neg.c文件 这里主要介绍2个方法 1. p2p_connect_send接受来自 p2p.c 文件中调用p2p_connect方法发送的GON Request帧 2. p2p_process_go_neg_resp处理来自GON Response帧的处理流程 先看下p2p_connect_send方法 int p…

数据结构:顺序表(C实现)

个人主页 水月梦镜花 个人专栏 C语言 &#xff0c;数据结构 文章目录 一、顺序表二、实现思路1.存储结构2.初始化顺序表(SeqListInit)3.销毁顺序表(SeqListDestroty)4.打印顺序表(SeqListPrint)5.顺序表尾插(SeqListPushBack)and检查容量(SeqListCheckCapacity)6.顺序表头插(Se…