【微信小程序】video

*liee

已于 2024-02-21 14:56:04 修改

阅读量652

点赞数 10

文章标签：微信小程序小程序

于 2023-11-30 13:03:48 首次发布

本文链接：https://blog.csdn.net/li_dongyan/article/details/134708831

版权

video（常用）属性：

src string 要播放视频的资源地址

duration number 视频时长

autoplay boolean 是否自动播放

loop boolean 是否循环播放

muted boolean 默认是否静音

show-mute-btn boolean 是否显示静音按钮（小喇叭）

show-fullscreen-btn boolean 是否显示全屏按钮

danmu-btn boolean 是否显示弹幕按钮，只有初始化时有

enable-danmu boolean true 是否展示弹幕，只有初始化时有

controls boolean 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

*liee

关注关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 video详解及简单实例

08-31

主要介绍了微信小程序 video详解及简单实例的相关资料,需要的朋友可以参考下

微信小程序video组件列表播放视频wxvideos-master.zip

09-25

在这个“微信小程序video组件列表播放视频wxvideos-master.zip”项目中，重点是利用微信小程序的`<video>`组件来实现视频列表的播放功能。 `<video>`组件是微信小程序中用于展示视频的核心元素，它可以加载并播放...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序，video 全屏视屏展示，广告样式

技术分享

07-03

3154

微信小程序，video 全屏视屏展示，广告样式

微信小程序中使用video组件

richest_qi的博客

07-12

5992

小程序里要放置视频，用video组件。video组件很多属性，如：代码涉及的文件有： pages/index/index.wxml pages/index/index.wxss pages/index/index.js 相关链接使用scroll-view实现tabs

微信小程序开发中的视频播放和直播功能

最新发布

master_chenchen的博客

09-13

1300

在数字化的今天，视频和直播已经成为人们获取信息、娱乐的主要方式之一。对于微信小程序而言，集成视频播放和直播功能不仅可以增强应用的互动性，还能显著提升用户体验。想象一下，当用户在你的小程序中观看一场激动人心的比赛直播，或是学习一段生动的教学视频，这种沉浸式的体验无疑会让他们印象深刻。然而，要在微信小程序中实现高质量的视频播放和直播功能，并不是一件简单的事情。开发者需要熟悉微信小程序提供的视频组件，并掌握如何优化视频加载速度、处理直播流等技术细节。

小程序-video/视频播放---part1:属性及部分函数

飞翔的熊blabla

05-05

2843

微信小程序视频播放和h5的video标签相同，格式为:<video></video>. 其相关属性及其图文信息解析如下：按钮相关：controls 显示默认播放控件（播放/暂停按钮、播放进度、时间） autoplay 自动播放 如果加上这个属性，包括弹幕在内的信息自动也自动显示弹幕相关：danmu-btn 显示控制弹幕按钮enable-danmu 显示弹幕信...

微信小程序——video视频播放

xybhua的博客

02-07

3150

video组件常用于视频的播放，默认宽度为300px，高度为225px。创建的videoContent对象，用于对video组件进行控制。可以实现视频的播放暂停，发送弹幕，获取视频所处位置等。

微信小程序 - video使用总结

Qianmoer的博客

07-04

3564

2.点击封面的时候，获取到该视频的id，进行判断，如果当前没有视频播放，就把该视频设置为播放的状态；如果当前有视频播放，则停止当前播放的视频，再播放你点击的这个视频。感觉自定义的tabbar会方便许多，因为有时候底部tabbar的情况会不一样。我自己粗心没注意到这个问题。判断当前视频是否是播放的状态，如果是就显示视频，如果不是就隐藏视频；1.视频播放的时候，滑动页面视频会一直在那个位置不会跟着滚动条移动。2.一个视频播放的时候，其他视频停止播放，并显示封面。2.视频播放的时候，会挡住底部的tab导航。

使用微信小程序的video组件

热门推荐

richest_qi的博客

06-28

1万+

先来个简单的，  <video src="https://ugcbsy.qq.com/uwMROfz2r5xiIaQXGdGlQmdfJ7yHzHEsPXDor1Y5RH80k33k/v1413ivib4x.p712.1.mp4?sdtfrom=v1010&guid=9d9aa4fafb2dc32699076eb845f8fad8&vkey=7DFEE07A98C927034264801C10141717266BE5A521E3DC3491

微信小程序之video组件

yxy099的博客

12-30

420

1.video即视频 2.属性 3.代码 4.运行

微信小程序 video组件详解

01-20

微信小程序的`video`组件是用于在小程序中嵌入视频播放功能的重要元素，它使得开发者能够在用户界面上展示视频内容，无论是来自网络还是本地存储。本文将深入解析`video`组件的主要属性及其使用方法。首先，`video...

微信小程序 video组件详解及实例代码

09-01

主要介绍了微信小程序 video组件详解及实例代码的相关资料,需要的朋友可以参考下

小程序video

真真的博客

01-23

567

wxml <view class="page-body"> <video id="myVideo" autoplay="true" objectFit="fill" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102c

微信小程序video 点击自动全屏播放

m0_52946104的博客

02-17

2878

【代码】微信小程序video 点击自动全屏播放。

微信小程序 video 组件[播新视频旧视频暂停，再次播放延续上次播放时长]

weixin_49931650的博客

02-13

1987

播放新视频，旧视频暂停 ## 1、点击播放时，获取当前 video 组件中的视频id ## 2、2.1 点击第一个视频，没有视频实例、vid，先在this上创建一个 vid 和创建视频实例对象 2.2 点击另一个视频，新的视频开始播放，这时的 vid 和视频实例还是之前第一个视频的 2.3 判断 this 上的 vid 是否改变，改变了，去判断是否有视频实例 3.4 有视频实例，不管是否播放，去停止它播放，再去记录新的视频实例和vid

微信小程序video自定义控件control组件，实现拖动进度条，自定义暂停、播放、和加载中的图标

m0_47126632的博客

08-05

1117

根据需求自定义播放加载中暂停按钮、进度条和全屏按钮

小程序video置顶

weixin_33700350的博客

10-17

250

page { overflow-y: none; height: 100vh; } .page__hd_media { position: fixed; width:100vw; top:0; height: 30vh; z-index: 999; text-align: center; } video { width: 1...

微信小程序video标签

08-27

微信小程序的video标签用于显示和播放视频资源。可以通过设置video标签的src属性来指定视频的资源地址。同时可以使用controls属性来显示播放控件，initial-time属性来指定视频的初始播放位置，autoplay属性来自动播放视频，muted属性来设置静音播放，object-fit属性来控制视频的大小和容器的适应方式。然而，需要注意的是，在列表中直接使用video标签加载多个视频会导致页面卡顿。因此，建议在列表中使用封面图和播放小图标来显示视频元素，点击后再进行播放操作，以减少页面卡顿现象。此外，对于腾讯视频的地址vkey是定时变化的，因此无法直接写死在程序中。需要通过后端抓取接口，过滤掉无用字符串，解析json，组合地址，然后将合适的视频地址通过接口返回给小程序video组件的src属性，以实现正常播放视频。123 #### 引用[.reference_title] - *1* [微信小程序：video标签默认显示视频的第一帧作为封面](https://blog.csdn.net/mouday/article/details/118517724)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [微信小程序video组件调用腾讯视频的解析](https://blog.csdn.net/cj372835766/article/details/108417813)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]