video视频播放

1.列表页面

<template><div><ul><li class="item" v-for="(item,index) in list" :key="index" @click="turnPlay(item.videoUrl)"><img :src="item.img" alt=""><div class="btn"><i class="el-icon-caret-right"></i></div><div class="mask">一行白鹭上青天一行白鹭上青天一行白鹭上青天</div></li></ul></div>
</template><script>
export default {data () {return {list: [{img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png',videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4'},{img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png',videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4'},{img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png',videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4'},{img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png',videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4'},{img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png',videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4'},{img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png',videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4'},{img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png',videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4'}]}},methods: {turnPlay (url) {window.open(`${window.location.origin}/#/playVideo?url=${url}`, '_blank')}}
}
</script><style lang="less" scoped>
ul {display: flex;padding: 20px;flex-wrap: wrap;border: 1px solid red;box-sizing: border-box;justify-content: space-between;li {width: calc(90% / 6);height: 240px;overflow: hidden;border-radius: 6px;cursor: pointer;position: relative;img {width: 100%;height: 100%;object-fit: contain;transition: all 1s ease 0s;&:hover {transform: scale(1.2);}}.btn {position: absolute;top: 100px;left: 50%;width: 40px;height: 40px;background: rgba(0, 0, 0, 0.5);border-radius: 50%;display: flex;align-items: center;justify-content: center;transform: translate(-50%, 0);.el-icon-caret-right {font-size: 30px;color: #fff;}}.mask {position: absolute;bottom: 0;left: 0;width: 100%;height: 40px;background: linear-gradient(transparent 0, rgba(0, 0, 0, 0.75) 100%);line-height: 40px;padding: 0 5px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #fff;}}
}
</style>

2.视频页面

<template><div class="content"><div class="item"><div class="title">{{title}}</div><video width="1080" v-if="url" ref="videoRef" height="550" controlsList="nodownload" preload poster="" controls class="video"><source :src="url" type="video/mp4"></video></div></div>
</template><script>
export default {data () {return {title: '一行白鹭上青天',url: ''}},created () {this.url = this.$route.query.url},mounted () {if (this.url) {this.$refs.videoRef.play()}}
}
</script><style lang="less" scoped>
.content {width: 100%;height: 100vh;background: #1b1b1b;display: flex;align-items: center;justify-content: center;.item {display: flex;flex-direction: column;}
}
</style>

需要注意我这里跳转页面路由模式是‘hash’,如果是 ‘history’,页面会跳转错误

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

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

相关文章

套接字编程 --- 一

目录 1. 预备知识 1.1. 端口号 1.2. 认识TCP协议 1.3. 认识UDP协议 1.4. 网络字节序 2. socket 2.1. socket 常见系统调用 2.1.1. socket 系统调用 2.1.2. bind 系统调用 2.1.3. recvfrom 系统调用 2.1.4. sendto系统调用 2.3. 其他相关接口 2.3.1. bzero 2.3.2…

力扣:17. 电话号码的字母组合

力扣&#xff1a;17. 电话号码的字母组合 描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输…

Linux——文件重定向

目录 前言 一、重定向 二、重定向的运用 三、dup2 四、命令行中的重定向 五、为什么要有标准错误 前言 在之前我们学习了文件标识符&#xff0c;直到close可以使用文件标识符进行关闭&#xff0c;但是当我们关闭1号&#xff08;stdout&#xff09;时&#xff0c;无法往显…

00在linux环境下搭建stm32开发环境

文章目录 前言一、环境搭建1.arm-none-eabi-gcc2.openocd 三、创建stm32标准库工程1.创建工程目录2.修改stm32_flash.ld文件3.写makefile文件4.修改core_cm3.c5.写main函数并下载到板子上 最后 前言 我在那天终于说服自己将系统换成了linux系统了&#xff0c;当换成了linux系统…

UE5.1_使用技巧(常更)

UE5.1_使用技巧&#xff08;常更&#xff09; 1. 清除所有断点 运行时忘记蓝图中的断点可能会出现运行错误的可能&#xff0c;务必运行是排除一切断点&#xff0c;逐个排查也是办法&#xff0c;但是在事件函数多的情况下会很复杂且慢节奏&#xff0c;学会一次性清除所有很有必…

JavaWeb--Mybatis

一&#xff1a;Mybatis概述 1.Mybatis概念 MyBatis 是一款优秀的 持久层框架 &#xff0c;用于简化 JDBC 开发&#xff1b; MyBatis 本是 Apache 的一个开源项目 iBatis, 2010 年这个项目由 apache software foundation 迁移到了 google code&#xff0c;并且改名为 MyB…

OpenTenBase 开发环境搭建及Debug设置

最近有个 OpenTenBase开源核心贡献挑战赛 领导建议大家都去试试&#xff0c;我也去凑了下热闹&#xff0c;发现能力有限一时半会是搞不明白了&#xff0c;最多也就是能搞搞文档翻译&#xff0c;或者写点操作手册啥的。 不过不管怎么样&#xff0c;先把开发环境搭上&#xff0c;…

R语言的数据类型与数据结构:向量、列表、矩阵、数据框及操作方法

R语言的数据类型与数据结构&#xff1a;向量、列表、矩阵、数据框及操作方法 介绍向量列表矩阵数据框 介绍 R语言拥有丰富的数据类型和数据结构&#xff0c;以满足各类数据处理和分析的需求。本文将分享R语言中的数据类型&#xff0c;包括向量、列表、矩阵、数据框等&#xff…

vue组件之间通信方式汇总

方式1&#xff1a;props和$emit props和$emit仅仅限制在父子组件中使用 1.props&#xff1a;父组件向子组件传递数据 1.1 代码展示 <template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>…

giffgaff怎么充值?giffgaff怎么续费?

-性价比高&#xff1a;0月租&#xff0c;免费接收短信&#xff0c;充值一次&#xff0c;接码可以用20年以上&#xff08;仅需半年保号一次&#xff09;&#xff0c;可能是国内性价比最高的接码实体卡&#xff01;-安全&#xff1a;实体卡无须担心因号码被风控&#xff0c;还可以…

面试经典150题【61-70】

文章目录 面试经典150题【61-70】61.旋转链表86.分隔链表104. 二叉树的最大深度100.相同的树226.翻转二叉树101.对称二叉树105.从前序与中序遍历序列构造二叉树106.从后序和中序遍历序列构造二叉树117.填充每个节点的下一个右侧节点指针II114.二叉树展开为链表 面试经典150题【…

PostgreSQL 流复制

文章目录 1.流复制介绍2.异步流复制2.1.主库部署2.2.备库部署2.3.测试 3.同步复制3.1.主库部署3.2.备库部署3.3.测试 4.主备切换 开源中间件 # PostgreSQLhttps://iothub.org.cn/docs/middleware/ https://iothub.org.cn/docs/middleware/postgresql/postgres-stream/1.流复制…

unity学习(53)——选择角色界面--分配服务器返回的信息

好久没写客户端了&#xff0c;一上手还不太适应 1.经过测试&#xff0c;成功登陆后&#xff0c;客户端请求list_request&#xff0c;成功返回&#xff0c;如下图&#xff1a; 可见此时model第三个位置的参数是1.也成功返回了所有已注册角色的信息。 2.之前已知创建的角色信息…

141 Linux 系统编程18 ,线程,线程实现原理,ps –Lf 进程 查看

一 线程概念 什么是线程 LWP&#xff1a;light weight process 轻量级的进程&#xff0c;本质仍是进程(在Linux环境下) 进程&#xff1a;独立地址空间&#xff0c;拥有PCB 线程&#xff1a;有独立的PCB&#xff0c;但没有独立的地址空间(共享) 区别&#xff1a;在于是否共…

html前端的几种加密/解密方式

HTML前端的加密解密方式有以下几种&#xff1a; 一、base64加密 Base64编码&#xff1a;Base64是一种将二进制数据转换为可打印字符的编码方式。在前端&#xff0c;可以使用JavaScript的btoa()函数进行Base64编码&#xff0c;使用atob()函数进行解码。 var str "hello…

uniapp发行H5获取当前页面query

阅读uni的文档大致可得通过 onLoad与 onShow()的形参都能获取页面传递的参数&#xff0c;例如在开发时鼠标移动到方法上可以看到此方法的简短介绍 实际这里说的是打开当前页面的参数&#xff0c;在小程序端的时候测试并无问题&#xff0c;但是发行到H5时首页加载会造成参数获取…

内容管理平台原来这么好用,优秀企业必备

内容管理平台是企业的强有力支持者&#xff0c;它可以使企业对旗下的各种网站、应用和其他数字内容进行集中管理&#xff0c;有效提高工作效率。对于企业的运营、市场推广和客户服务等各方面都有着重要的影响。今天&#xff0c;我们就来推荐三款值得尝试的内容管理平台。 首先…

论文的引用书写方法

前置操作 1、全选文献 2、在开始选项卡 段落功能区 选择编号功能 3、设置编号格式 [1] 论文的引用 1、光标放在需要引用论文的地方 2、选择引用选项卡 点击交叉引用 3、引用类型为编号项 引用内容为段落编号 选择需要的第几条参考文献

备战蓝桥杯---动态规划的一些思想2

话不多说&#xff0c;直接看题&#xff1a; 1.换根DP&#xff1a; 我们肯定不能对每一个根节点暴力求&#xff0c;我们不妨先求f[1]&#xff0c;我们发现当他的儿子作为根节点时深度和为f[1](n-cnt[i])-cnt[i](cnt[i]表示以i为根的节点数&#xff09;&#xff0c;这样子两遍DFS…

论文阅读:Diffusion Model-Based Image Editing: A Survey

Diffusion Model-Based Image Editing: A Survey 论文链接 GitHub仓库 摘要 这篇文章是一篇基于扩散模型&#xff08;Diffusion Model&#xff09;的图片编辑&#xff08;image editing&#xff09;方法综述。作者从多个方面对当前的方法进行分类和分析&#xff0c;包括学习…