uniapp使用video组件 本地视频播放

已于 2023-10-08 19:26:24 修改
阅读量3.9k 收藏 9
点赞数 2
文章标签： uni-app 音视频
于 2023-08-11 15:38:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64373473/article/details/132232257
版权

一、首先了解一下video标签的属性

  • src：视频的属性
  • poster：视频封面；没有播放时显示的图片
  • preoad：预加载
  • autoplay：自动播放
  • loop：循环播放
  • controls：浏览器自带的控制条
  • width：视频宽度
  • height·：视频高度

二、下载插件

npm i vant
&&
yarn add vant

三、然后组件中使用video标签渲染视频

在这里插入图片描述

我这里的引入的视频路径在node里面，需要运行后端

在这里插入图片描述
效果

在这里插入图片描述

冷七七-
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序使用video组件播放视频功能示例【附源码下载】
08-28
主要介绍了微信小程序使用video组件播放视频功能,结合实例形式分析了video组件播放本地mp4小视频的具体实现技巧,并附带源码供读者下载参考,需要的朋友可以参考下
uni-app-video(支持后台播放音频的视频播放器).zip
10-16
uni-app-video(支持后台播放音频的视频播放器).zip
uniapp-微信小程序-短视频-video-自定义播放控件-无上下滚动-非H5
qq_41901130的博客
09-25 1682
UNIAPP微信小程序端video短视频自定义播放控件
解决Uniapp视频在手机上无法播放的终极指南！
最新发布
CRMEB小程序商城的博客
03-25 1153
介绍：本文主要介绍uniapp中video标签在手机端无法播放视频的问题并且如何解决。
uniapp video app 加载不出来解决方案
明耀的博客
06-16 1万+
video 加载的url 不能有中文
uniapp实现音视频通讯
anyRTC的博客
03-19 8520
uniapp实现音视频通讯 还在为uniapp的音视频通讯发愁吗？anyRTC为解决广大开发者需求，特别研发了uniapp版的音视频通讯。 anyRTC 实时通信包括两个模块： 实时音视频模块- 音视频通信 实时消息模块- 信令交互，直播间弹幕等通信 下面我来带大家先了解实时音视频模块 示例项目运行流程(本文使用远端插件) 前往uniapp插件市场 下载示例demo 打开manifest.json文件，选择App原生插件配置 => 远端插件 制作自定义基座 打包成功后选择
uniapp video（倍速功能、层级过高、视频第一帧做封面 等问题）
tengyuxin的博客
05-23 6026
逻辑上就是再url后面，添加?出现上下出现黑边的原因是： object-fit ：contain；需要修改为 fill 就可以了。我想要在video视频上面显示内容，可是无论怎么在view中使用定位，都无法盖住视频。后来使用cover-view就可以了。
uniappvideo避坑指南（H5、小程序、app）
weixin_64974600的博客
07-16 1万+
video避坑指南，解决闪退问题
uni-app之video视频组件
热门推荐
踏雪无痕
06-04 3万+
一.平台差异说明 二.属性说明 备注：video默认宽度 300px、高度 225px，可通过 css 设置宽高。 三.案例实战 1.video界面 <view class="page"> <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.ali
uniapp视频播放功能
m0_73481765的博客
09-18 6512
media组件是基于uni-app原生组件的视频播放组件，支持更多视频格式（如FLV、RTMP等）。UniApp提供了多种视频播放组件，包括视频播放器（video）、多媒体组件（media）、WebView（内置Video标签）等。video组件是基于HTML5 video标签的UniApp视频播放组件，支持常见的视频格式（如MP4、M4V、MOV等）。使用video组件需要引入uni-ui组件库。以上是使用video和media组件实现视频播放的示例代码，具体使用方式可以根据自己的需求进行调整。
使用uni-app组件播放视频
lw18751836671的专栏
11-15 1万+
想做一个简单的视频播放器，能够在局域网播放硬盘上的视频。如下图所示，从硬盘指定位置读取视频数据，由服务器返回视频流，在浏览器端播放。
因为uniapp的video标签层级太高，所以我这边引用了原生的video标签
Redguest1的博客
11-28 879
因为uniapp的video标签层级太高，所以我这边引用了原生的video标签 因为uniapp的video标签没有倍速功能而且层级太高只能够利用内置组件进行重写。
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "navigationStyle": "custom", "app-plus": { "titleNView": false, //禁用原生导航栏 "subNVues": [{ "id": "subnvue", //顶部导航配置 "path": "pages/index/subnvue", "type": "navigationBar" }, { "id": "drawer", "path": "pages/index/drawer.nvue", // 配置分享弹窗 "style": {
微信小程序使用video组件播放M3U8视频卡顿
01-20
微信小程序中使用video组件播放m3u8直播视频，在ios的真机预览里点击video中间的播放容易卡几十秒，此时什么都做不了，手机也非常非常卡。 我的解决办法是在视频video组件里加入custom-cache={{false}} autoplay=...
vue使用video.js进行视频播放功能
10-16
video.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放，这篇文章主要介绍了vue中使用video.js进行视频播放,需要的朋友可以参考下
uniapp的video标签的使用 little白笔记
Lwmbxq的博客
01-21 3422
初次使用uniapp和video的笔记
uniapp android播放本地视频
前端程序员、项目经理、人工智能博主
11-29 911
本文将介绍如何在uniapp开发中实现Android平台播放本地视频的功能。首先我们会梳理整个实现过程的流程，并使用表格列出每个步骤需要做的事情。然后，我们会逐步解释每个步骤需要做的事情，并提供相关的代码示例。
uniapp video android真机中黑屏 只有声音没有画面
weixin_57286220的博客
03-23 7566
在使用uniapp的video组件的时候，遇到进入页面播放正常，但再次进入重新加载页面后，会出现黑屏但有声音的问题。 因为需求是要在离开页面后不再播放视频，所以这里在onShow时绑定视频组件，并开始播放： <video id="myVideo" :src="videosrc" object-fit="cover" :autoplay="true" loop="true" controls="false" custom-cache="false" enable-play-gesture="false"
uniapp使用video组件，并实现一些弹框
2301_77513512的博客
11-07 1187
我当前项目是一个看视频的小程序，因为用到了uniapp内置的video组件，并且观看视频中以及结尾有不少弹框，所以准备记录一下一些常用api、函数、使用方法和中间遇到的问题。
uniapp播放本地视频
06-07
要在Uniapp中播放本地视频，你可以使用uni-app提供的video组件。这个组件可以播放来自本地文件或网络的视频。 下面是一个简单的示例代码，可以在uni-app的页面中实现本地视频播放： ```html <template> <view> <video :src="videoPath" controls autoplay></video> </view> </template> <script> export default { data() { return { videoPath: "/static/videos/sample.mp4" // 视频文件在static目录下 }; } }; </script> ``` 在这个示例中，我们使用video组件来显示视频，通过设置src属性来指定视频文件的路径。在这个例子中，我们假设视频文件位于项目的static目录下，文件名为sample.mp4。 你可以根据自己的需求修改这个示例代码，例如添加一些控制按钮，或者使用uni-app提供的其他组件来美化你的播放器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值