首页 > 其他分享 >【uniapp】video在公众号自动播放事件及使用object-fit使内容填充不留黑边

【uniapp】video在公众号自动播放事件及使用object-fit使内容填充不留黑边

时间:2024-10-14 17:22:00浏览次数:7  
标签:uniapp fit 填充 object video 不留

 

视频组件官网:https://uniapp.dcloud.net.cn/component/video.html

    使用object-fit使内容填充不留黑边
    object-fit

    contain 当视频大小与 video 容器大小不一致时,视频的表现形式。
    contain:包含,fill:填充,cover:覆盖

 

在template中添加

<template>
    <view>
             <video id="zsVideo" :src="myVideo" :danmu-list="danmuList" enable-danmu danmu-btn controls
                    style="width:100%;height:202px;" object-fit="fill"
                    poster='/images/videro.png?v=0.20241014001' @pause="handlePause"
                    @click="onVideoPlay">
            </video>
    </view>
</template>

 

标签:uniapp,fit,填充,object,video,不留
From: https://www.cnblogs.com/Fooo/p/18464648

相关文章

  • UE-GAS CreateDefaultSubobject<UAbilitySystemComponent>返回为nullptr
    前因原先在项目中用了默认的ASC(UAbilitySystemComponent),后面因为新的需求导致需要改为自己的ASC。结果改了之后,发现在Pre-Init(构造函数)时,CreateDefaultSubobject的返回值是nullptr。过程于是去论坛求助:论坛的人的回答是,你修改了ASC的类,导致前一个ASC反序列化到当前ASC上,从而......
  • 10月最新版本所有功能正常使用 全开源TikTok跨境商城源码 独立站商城运营+带文字教程
    10月最新版本,非源码站垃圾,所有功能最新所有功能已更新所有功能已更新所有功能已更新....更新日志:9月25日:1.新增加商城落地页,更大气更直观的了解商城2.增加卖家进货时的授权码(后台可进行修改) 8月5日:1.新增一键更新功能,后面更新了代码可以,后台一键拉取新代码自动部署......
  • FIT2107 - Software Quality and Testing
    FIT2107-SoftwareQualityandTestingASSIGNMENT2[40%]WhiteboxtestingandcodeanalysisOverviewForthisassignment,yourtaskistodesignanddocumentappropriatetestsforasoftwaresystemusingwhiteboxtechniques,buildaCI/CDpipelinetor......
  • [Javascript] Object property order
    ForJavascriptObject,youcannotassumetheorderofObjectpropertythesameastheorderofaddingthoseproperty.TheactualorderfollowthisruleIfit's'1','2',sortedasecandmoveforwardtothebeginningvarobj={}......
  • 基于微信小程序的流浪动物救助收养系统 uniApp
    项目介绍动物是自然界的生命体,任何生命都值得尊重,人们对于动物的态度体现了人类文明的程度。我国是生物多样性最丰富的国家之一,前后出台了多项政策法规维护生物多样性和生态平衡,以此推进生态文明建设。经过长期的努力,以政府及管理部门为救助主导力量,同时拓宽参与渠道,完善激......
  • uniapp小程序使用文字转语音播报类似支付宝收款播报小程序语音识别和朗读
    第一步:登陆微信公众平台,侧边栏的设置-----第三方设置-----插件管理----添加插件(搜索–同声传译)第二步:打开hbiuider-x,找到当前项目,打开manifest.json,找到源码视图,配置插件   代码块://provider是你查看详情以后的appId"plugins":{"WechatSI":{......
  • UniApp入门教程
    UniAppX是一种用于构建跨平台应用程序的框架,它基于Vue.js并通过UniApp技术栈支持多种平台,如微信小程序、支付宝小程序、H5、Android和iOS。以下是UniAppX的一些关键特点和基础知识:UniAppX的特点跨平台支持:可以使用相同的代码基础,构建多个平台的应用。支持小程......
  • 基于SpringBoot+Vue+Uniapp微信小程序的打印室预约系统设计与实现(源码+文档+部署视频)
    文章目录1.前言2.详细视频演示3.论文参考4.项目运行截图5.技术框架5.1后端采用SpringBoot框架5.2前端框架Vue6.选题推荐毕设案例8.系统测试8.1系统测试的目的8.2系统功能测试9.代码参考10.为什么选择我?11.获取源码1.前言......
  • python: create object
     classAccount(object):"""账户"""owner:str#类型提示"""类型提示"""balnace:float#类型提示"""类型提示"""def__init__......
  • 基于SpringBoot+Vue+uniapp的税务门户网站的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......