uniapp使用视频地址获取视频封面

很多时候我们都需要使用视频的第一帧当作视频的封面,今天我们从uni-app的安卓app这个环境来实现下这个需求。

uniapp 安卓APP端(ios未测试)

方法:使用renderjs实现对DOM元素的操作,创建video元素获取视频转第一帧,使用canvas转为base64格式进行展示

<template>
	<video :src="src" :poster="poster" :change:src="video.setPoster"></video>
</template>

<script>
	export default {
		data() {
			return {
				poster: '',
				src: 'https://oss-p56.xpccdn.com/prod/footage/preview/xpc/HHMFcJlnHMS3TBj.mp4'
			}
		},
		methods: {
			getPoster(poster) {
				this.poster = poster
			}
		}
	}
</script>
<script lang="renderjs" module="video">
	export default {
		methods: {
			setPoster(newV, oldV, ownerInstance) {
				let video = document.createElement("video");
				video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
				video.setAttribute('src', newV);
				video.setAttribute('width', 1000);
				video.setAttribute('height', 500);
				// 表示可以下载整个视频文件,即使用户不希望使用它。这样才能获取到视频文件
				video.setAttribute('preload', 'auto');
				// loadeddata 事件在媒体当前播放位置的视频帧(通常是第一帧)加载完成后触发。
				video.addEventListener('loadeddata', function() {
					let canvas = document.createElement("canvas"),
					width = video.width, //canvas的尺寸和图片一样
					height = video.height;
					canvas.width = width;
					canvas.height = height;
					canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
					let poster = canvas.toDataURL('image/jpeg'); //转换为base64
					ownerInstance.callMethod('getPoster', poster)
				});
			}
		}
	}
</script>

展示

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

图论-简明导读

计算机图论是计算机科学中的一个重要分支&#xff0c;它主要研究图的性质和结构&#xff0c;以及如何在计算机上有效地存储、处理和操作这些图。本文将总结计算机图论的核心知识点。 一、基本概念 计算机图论中的基本概念包括图、节点、边等。图是由节点和边构成的数据结构&am…

APP外包开发的iOS开发框架

在开发APP时需要用到各种框架&#xff0c;这些框架提供了基础的软件功能&#xff0c;可以减轻开发工作量&#xff0c;因此在APP项目开发中熟练运用常见的框架是开发者需要掌握的技能。每个框架都有其特点和适用场景&#xff0c;开发者可以根据项目的需求选择合适的框架进行开发…

kv键值对快速转换为json串(字典类型) | 批量添加双引号

从浏览器中复制的以下数据, 并不能直接使用 refresh:0 start:0 count:20 selected_categories:%7B%7D uncollect:false playable:true tags:在python中需转为字典类型 {refresh: 0,start: 0,count: 20,selected_categories: %7B%7D,uncollect: false,playable: true,tags: , …

docker push 报错:unauthorized: unauthorized to access repository: library/xx处理方法

rootmaster:/home/data/harbor# sudo docker login 49.0.241.2 admin Harbor12345 1.报错原因分析 rootmaster:/home/data/harbor# docker push 49.0.241.2/library/nginx:latest #这种报错 The push refers to repository [49.0.241.2/library/nginx] Get "https://49.…

【网络】网络层(IP协议)

目录 一、基本概念 二、协议头格式 三、网段划分 四、特殊的IP地址 五、IP地址的数量限制 六、私有IP地址和公网IP地址 七、路由 一、基本概念 IP协议&#xff1a;提供一种能力&#xff0c; 将数据从A主机送到B主机&#xff0c;&#xff08;TCP协议&#xff1a;确保IP协议…

数据分析 VS 数据可视化:决战时刻

数据分析和数据可视化是数据科学领域中两个重要的组成部分&#xff0c;很多人不明白两者之间的关系&#xff0c;会误认为是一个东西&#xff0c;其实不然。本文就带大家简单了解一下它们的区别与联系吧&#xff01; 数据分析是指通过收集、处理和解释数据来获取有关特定问题或…

Jenkins 节点该如何管理?

Jenkins 拥有分布式构建(在 Jenkins 的配置中叫做节点)&#xff0c;分布式构建能够让同一套代码在不同的环境(如&#xff1a;Windows 和 Linux 系统)中编译、测试等 Jenkins 的任务可以分布在不同的节点上运行 节点上需要配置 Java 运行时环境&#xff0c;JDK 版本大于 1.5 节…

今年嵌入式行情怎么样?

我不了解其它行业可能描述有些片面&#xff0c;但总的来说&#xff0c;我对嵌入式是很看好的&#xff0c;因为你可以感受到你能实际的做出产品而不是类似前端和互联网只是数字数据。 并且嵌入式的学习过程充满乐趣&#xff0c;你可以接触到从沙子到开关管到逻辑门到芯片架构到…

图文档数字化:实现高效管理的几大步骤

在当今数字化时代&#xff0c;企业越来越意识到数字化管理对于图文档的重要性。传统的纸质文件管理往往效率低下&#xff0c;容易出现丢失和混乱的情况。为了提高工作效率、降低成本并确保数据安全&#xff0c;许多企业选择采用PDM&#xff08;产品数据管理&#xff09;系统来实…

JVM内存模型【入门】

计算机结构简图 JVM内存模型 详细说明&#xff1a;https://blog.csdn.net/m0_71777195/article/details/126247090 什么是JVM&#xff1f; JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&#xff0c;JVM是一个虚构出来的计算机&#xff0c;有着自己完善…

【触觉智能Purple Pi OH开发板体验】开箱体验:开源主板Purple Pi RK3566 上手指北

前言 前段时间收到来自【电子发烧友】的一款开发板&#xff0c;名叫&#xff1a;PurplePi&#xff0c;216G售价仅249元。它使用的芯片是rk3566&#xff0c;适配的OpenHarmony版本为3.2 Release 是目前最便宜的OpenHarmony标准系统开源开发板&#xff0c;并且软硬件全部开源&am…

SpringCloud之断路器聚合监控

一、Hystrix Turbine简介 看单个的Hystrix Dashboard的数据并没有什么多大的价值&#xff0c;要想看这个系统的Hystrix Dashboard数据就需要用到Hystrix Turbine。Hystrix Turbine将每个服务Hystrix Dashboard数据进行了整合。Hystrix Turbine的使用非常简单&#xff0c;只需要…

QT数据库编程

ui界面 mainwindow.cpp #include "mainwindow.h" #include "ui_mainwindow.h" #include <QButtonGroup> #include <QFileDialog> #include <QMessageBox> MainWindow::MainWindow(QWidget* parent): QMainWindow(parent), ui(new Ui::M…

[Linux]基础IO详解(系统文件I/O接口、文件描述符、理解重定向)

hello&#xff0c;大家好&#xff0c;这里是bang___bang_ &#xff0c;今天和大家谈谈Linux中的基础IO&#xff0c;包含内容有对应的系统文件I/O接口&#xff0c;文件描述符&#xff0c;理解重定向。 目录 1️⃣初识文件 2️⃣ 系统文件I/O接口 &#x1f359;open &#x1…

小程序学习(五):WXSS模板语法

1.什么是WXSS WXSS是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS 2.WXSS和CSS的关系 WXSS模板样式-rpx 3.什么是rpx尺寸单位 4.rpx的实现原理 5.rpx与px之间的单位换算* WXSS模板样式-样式导入 6.什么是样式导入 使用WXSS提供的import语法,可以导入外联的样式…

华为云低代码平台Astro Canvas 搭建汽车展示大屏——实验指导手册

实验背景 大屏应用Astro Canvas是华为云低代码平台Astro的子服务之一&#xff0c;是以数据可视化为核心&#xff0c;以屏幕轻松编排&#xff0c;多屏适配可视为基础&#xff0c;用户可通过图形化界面轻松搭建专业水准的数据可视化大屏。例如汽车展示大屏、监控大屏、项目开发大…

数据结构——绪论

一、绪论 &#xff08;一&#xff09;基本概念 数据&#xff1a;数据是对客观事物的符号表示&#xff0c;在计算机科学中是指所有能输入到计算机中并被计算机程序处理的符号的总称。 数据元素&#xff1a;数据元素是数据的基本单位&#xff0c;在计算机程序中通常作为一个整…

消息队列总结(4)- RabbitMQ Kafka RocketMQ高性能方案

1.RabbitMQ的高性能解决方案 1.1 发布确认机制 RabbitMQ提供了3种生产者发布确认的模式&#xff1a; 简单模式&#xff08;Simple Mode&#xff09;&#xff1a;生产者发送消息后&#xff0c;等待服务器确认消息已经被接收。这种模式下&#xff0c;生产者发送消息后会阻塞&am…

学习系统编程No.34【线程同步之信号量】

引言&#xff1a; 北京时间&#xff1a;2023/7/29/16:34&#xff0c;一切尽在不言中&#xff0c;前几天追了几部电视剧&#xff0c;看了几部电影&#xff0c;刷了n个视屏&#xff0c;在前天我们才终于从这快乐的日子里恢复过来&#xff0c;然后看了两节课&#xff0c;也就是上…

真机搭建中小网络

这是b站上的一个视频&#xff0c;演示了如何搭建一个典型的中小网络&#xff0c;供企业使用 一、上行端口&#xff1a;上行端口就是连接汇聚或者核心层的口&#xff0c;或者是出广域网互联网的口。也可理解成上传数据的端口。 二、下行端口&#xff1a;连接数据线进行下载的端…