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

很多时候我们都需要使用视频的第一帧当作视频的封面,今天我们从uni-app的安卓app这个环境来实现下这个需求。文中需要你对uniapp的renderjs有一定了解,可以先看我的这篇文章初识renderjs

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); //绘制canvaslet poster = canvas.toDataURL('image/jpeg'); //转换为base64ownerInstance.callMethod('getPoster', poster)});}}}
</script>

展示

在这里插入图片描述

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

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

相关文章

React入门学习笔记2

jsx语法规则 定义虚拟DOM时&#xff0c;不要写引号。标签中混入JS表达式时要用{ }。样式的类名指定不要用class&#xff0c;要用className。内联样式&#xff0c;要用style{{key&#xff1a;value}}的形式去写。只有一个根标签标签必须闭合标签首字母 )若小写字母开头&#xf…

2023-08-05——JVM Method Area(方法区)

方法区 Method Area&#xff08;方法区&#xff09; 方法区是指被所有线程共享的&#xff0c;字段和方法字节码&#xff0c;以及一些特殊方法&#xff0c;如构造函数&#xff0c;接口代码在此定义&#xff0c;简单的说就是所有的定义方法信息都保存在此区域&#xff0c;此区域…

selenium 和 chromedriver 使用的一些总结

1 selenium 下载地址 selenium PyPIhttps://pypi.org/project/selenium/ 2 chromedriver 下载地址 &#xff0c;可以下载最新版的 chromedriver ChromeDriver - WebDriver for Chrome - Downloadshttps://chromedriver.chromium.org/downloadsChrome for Testing availabi…

【沁恒蓝牙mesh】CH58x flash分区与数据存储管理

本文主要介绍了 沁恒蓝牙芯片 CH58x 的flash 分区与数据存储管理 &#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是喜欢记录零碎知识点的小菜鸟。&#x1f60e;&#x1f4dd; 个人主页&#xff1a;欢迎访问我的 Ethernet_Comm 博客主页&…

hcip的mgre和ospf实验

题目 拓扑图 一、配置环回和IP地址 R1 < Huawei>sy Enter system view, return user view with CtrlZ. [Huawei]sysname r1 [r1]int g0/0/1 [r1-GigabitEthernet0/0/1]ip add 64.1.1.1 24 Aug 4 2023 18:56:07-08:00 r1 %%01IFNET/4/LINK_STATE(l)[0]:The line protocol…

LinkedList和ArrayList有什么区别?

ArrayList和LinkedList的大致区别&#xff1a; ArrayList是实现了基于动态数组的数据结构&#xff0c;LinkedList基于链表的数据结构。 对于随机访问get和set&#xff0c;ArrayList觉得优于LinkedList&#xff0c;因为LinkedList要移动指针。 对于新增和删除操作add和remov…

vue页面布局

布局 用element-plus自带的布局&#xff1b; 左边菜单 用他的Menu 菜单、自带收缩和展开&#xff1b;数据可以接口获取或者写死&#xff1b; 使用的如下操作、把主题和默认打开的index存到缓存中 头部&#xff1b; 简单的先分成左右&#xff1b;再简单的分成左右 1、左…

高通滤波器,低通滤波器

1.高通滤波器是根据像素与邻近像素的亮度差值来提升该像素的亮度。 import cv2 import numpy as np from scipy import ndimagekernel_3_3 np.array([[-1,-1,-1],[-1,8,-1],[-1,-1,-1]]) print(kernel_3_3) kernel_5_5 np.array([[-1,-1,-1,-1,-1],[-1,1,2,1,-1],[-1,2,4,2,-…

FDM3D打印系列——超可动可变形机体打印

大家好&#xff0c;我是阿赵。继续来分享一下3D打印的成果。   这次打印的对象不得了&#xff0c;是超时空要塞系列的可变形VF战机。打印完这个模型&#xff0c;绝对是学习到了很多的东西&#xff0c;下面给大家分享一下。 一、成果展示&#xff1a; 不要怀疑&#xff0c;不…

Elasticsearch 商业启示

上月的“红帽事件”&#xff0c;说明开源软件的“客服模式”行不通&#xff0c;那么&#xff0c;开源软件如何赚钱呢&#xff1f;既不能卖软件&#xff0c;又不能卖支持服务&#xff0c;该怎么办呢&#xff1f;我现在的看法是&#xff0c;只剩下一种模式是可行的&#xff0c;开…

Java 监听Mysql binlog

使用 mysql-binlog-connector-java 1. mysql-binlog-connector-java 官网 2. Java代码中&#xff0c;如何监控Mysql的binlog&#xff1f; 前置条件 1. mysql服务器表结构 CREATE TABLE student (id int NOT NULL AUTO_INCREMENT,name varchar(255) CHARACTER SET utf8mb4 C…

HCIA-datacom数通题库和录播视频资料

HCIA-Datacom&#xff0c;是华为数通认证的初级考试&#xff0c;培训与认证具备数通基础通用知识和技能水平的工程师&#xff0c;只是入门了解数通的一些基础通用知识&#xff0c;适用于小白了解和学习数通知识点起点。 个人建议还是有必要考的&#xff0c;如果在企业考试考试…

Java自定义校验注解实现List、set集合字段唯一性校验

文章目录 一&#xff1a; 使用场景二&#xff1a; 定义FieldUniqueValid注解2.1 FieldUniqueValid2.2 注解说明2.3 Constraint 注解介绍2.4 FieldUniqueValid注解使用 三&#xff1a;自定义FieldUniqueValidator校验类3.1 实现ConstraintValidator3.2 重写initialize方法3.3 重…

mfc140.dll缺失怎么修复?教你下载安装mfc140.dll文件

mfc140.dll缺失要解决其实还是挺简单的&#xff0c;而且有非常的多的方法&#xff0c;只要你了解这个文件&#xff0c;那么你就能快速的修复mfc140.dll文件&#xff0c;其实所谓的修复就是mfc140.dll文件的下载安装&#xff0c;好了&#xff0c;废话不多少&#xff0c;一起来看…

Selenium入门详细教程+实例演示

目录 1.Selenium概述 1.1什么是Selenium 1.2Selenium的优势 1.3Selenium WebDriver原理 2.Selenium环境搭建 3.Selenium 简单示例 4.八大元素定位 4.1定位方式 4.2定位方式的用法 5.Selenium API 5.1WebDriver 常用 API 5.2WebElement 常用 API 5.3代码示例 6.元素等待机…

linux-MySQL的数据目录

总结&#xff1a; window中的my.ini linux 中 /etc/my.cnfwindow中的D:\soft\mysql-5.7.35-winx64\data linux 中 /var/lib/mysql 1.查找与mysql有关的目录 find / -name mysql [rootVM-4-6-centos etc]# find / -name mysql /opt/mysql /etc/selinux/targeted/tmp/modul…

【MySQL】使用C/C++连接MySQL数据库

【MySQL】使用C/C连接MySQL数据库 验证使用select特殊点 本文目的&#xff1a;使用MySQL提供的CAPI完成对数据库的操作 验证 #include <iostream> #include <mysql/mysql.h>int main() {std::cout<<"mysql cilent version: "<<mysql_get_cl…

Java8 文件工具类 FileUtils(持续更新中)

1. Java8 文件处理 使用 Java8 的 java.nio.file 方法&#xff0c;来进行文件处理。 1.1. 读文件 所有内容一次读出来&#xff0c;结果为字符串。 1.1.1. 代码 /*** 读取文件** param path 文件路径* return 文件内容&#xff08;字符串&#xff09;*/public static String…

基础篇:多线程所需知识:RAII接口模式对生产者和消费者封装以及多batch实现

我们先来弄一个最基础的infer类&#xff1a; class Infer{ public: bool load_model(const string &file){context_ file;return true;} void forward(){if(context_.empty()){printf("加载模型异常\n");return;}printf("使用%s进行推理\n " , contex…

【LNMP】LNMP

LNMP&#xff1a;是目前成熟的企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件&#xff1b;能够提供静态页面服务&#xff0c;也可以提供动态web服务 L Linux系统&#xff0c;操作系统N Nginx网站服务&#xff0c;前端&#xff0c;提供前端的静态…