小程序 video 组件同层渲染公测

最新推荐文章于 2024-04-15 05:51:47 发布

weixin_30321709

最新推荐文章于 2024-04-15 05:51:47 发布

阅读量374

点赞数

原文链接：http://www.cnblogs.com/lovebing/p/10400847.html

版权

小程序 video 组件同层渲染公测

各位开发者：

大家好。

小程序原生组件因脱离 WebView 渲染而存在一些使用上的限制，为了方便开发者更好地使用原生组件进行开发，我们对小程序原生组件引入了 同层渲染 模式。通过同层渲染，小程序原生组件可与其他内置组件处于相同层级，不再有特殊的使用限制。

现阶段，小程序 video 组件 已切换至同层渲染模式。在该模式下，video 组件可以做到：

1、直接通过 z-index 属性对 video 组件进行层级控制；

2、无需使用 cover-view、cover-image 组件来覆盖 video 组件；

3、可在例如 scroll-view、swiper、movable-view 等内置组件中使用 video 组件；

4、可通过 CSS 对 video 组件进行控制；

5、video 组件不会遮挡 vConsole。

基础库 v2.4.0 及以上版本已默认开启 video 同层渲染，其他原生组件如 input、map、canvas、live-player、live-pusher 等也将逐步切换至同层渲染模式。

欢迎广大开发者进行公测，如有问题，可反馈给我们。

微信团队

2019.02.13

文章来源：刘俊涛的博客

欢迎关注，有问题一起学习欢迎留言、评论

转载于:https://www.cnblogs.com/lovebing/p/10400847.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30321709

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信小程序的「同层渲染」踩坑记

03-29

背景近期在开发小程序中，接触最多的就是 canvas 了，期间又因为兼容性的问题，又经历了底层 API 的新旧版的替换，踩的坑可谓令人印象深刻。小程序（微信）的 canvas 与 HTML 标准的 canvas 有较大区别，就连小程序本身的 canvas 底层 API 都有两个大版本的区别（其实远古时期还有一个版本，但年代过于久远就不做考究了）。目前现存的两个版本的区别在于是否支持「同层渲染」。同层渲染 小程序的内容大多是渲染在 WebView 上的，如果把 WebView 看成单独的一层，那么由系统自带的这些原生组件则位于另一个更高的层级（如 canvas、video）。两个层级是完全独

[微信小程序]单界面放多个video的渲染问题

CosecantY的博客

12-11

1230

在项目中有需求为：在一个页面放多个video，并且点击video可以播放视频。一开始没想那么多，直接贴贴贴上去，一打开直接渲染一堆video标签，后来发现了渲染错误，开头的标签可以渲染出来，到后面就全挂掉了。翻了会文档知道，这玩意不能一下放好多上去，一个页面也就能放两三个同时存在，那么我这需求咋实现呢？？又翻了一会，想到了个办法，咱们可以在不播放它的时候就不渲染video标签，想播放的时候再给它渲染出来。这里放个图不放代码了，很杂，大致思路就是给video标签做个遮罩层，遮罩上写点击播放，在

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

小程序 movable-view cover-view

ai5945fei的博客

11-05

484

<view>movable-view操作</view> <movable-area class="area"> <movable-view class="view" direction="all"> </movable-view> </movable-area> dircetion 可以拖动的方向 scale 可以双指拖放 inertia 惯性操作页面高度100%设置需要先设置page整页样式，注意page..

不挂载组件渲染_WKWebView优化：同层渲染视频组件

weixin_29570795的博客

01-12

451

效果展示先看Demo视频，对比App内常规的H5播放体验和使用同层渲染视频组件后的H5页面播放体验：常规H5 <video/>播放体验常规H5 <video/>播放体验https://www.zhihu.com/video/1247184143089549312使用同层渲染视频组件后H5页面的播放体验使用同层渲染视频组件播放体验https://www.zhihu.com/v...

h5中video标签的层级变低，同层渲染问题（目前仅在qq内核浏览器试过）

Hgh_1997的博客

03-02

1102

1.在uniapp中使用video处理 <video id="myVideo" class="video-player" :src="videoObj.video_url" :poster="videoObj.image" x5-video-player-type="h5-page"></video> 2.在vue中使用腾讯播放器时使用（其他播放器差不多）动态添加x5-video-player-type // 使用腾讯点播sdk播放器 // https://cloud.ten

【走进小程序原理】揭秘组件同层渲染

百度智能小程序技术团队

08-20

5822

阅读本文的收获：为什么我的小程序组件不能随着页面滚动？为什么组件层级不对？我该如何解决？在日常开发中，我们总能在小程序的开发文档里看到种种组件：基础组件：小程序框架层开发自定义组件：开发者or小程序官方，基于基础组件进行二次开发动态库组件：小程序官方开发的、以动态库形式发布的组件，其本质依然是自定义、基础组件 ...... 综上：就像是盖楼，框架开发的基础组件，是小程序所有组件建筑的地基，我们今天要聊的正是它。基础组件实现前置名词解释 NA：Native App的缩写，是.

scroll-video:scroll-video微信小程序视频上下滑动播放方案视频滑动播放的两种方案：Swiper + Video，使用Swiper插入视频进行视频播放，小程序v2.4.0起Video组件支持同层渲染，大体思路是保证一个视频组件，记录Swiper的电流，并对swiper-item的下标做比对，来比较当前索引和current是否一致，一致则展示Video组件。滑动效果比较好，还有优化的，怎么预加载，怎么大体思路是固定一个视频组件，将封面图平铺在视频组件上，根据手势滑动的范围，确定上滑或替换

03-23

Swiper + Video，使用Swiper合并视频进行视频播放，小程序v2.4.0起Video组件支持同层渲染，大体思路是保证一个视频组件，记录Swiper的电流，并与此swiper-item的下标做比对，来对比当前索引和current是否一致，一致...

微信小程序video组件调用腾讯视频的解决方案

tiffany_kim的博客

04-13

4230

最近在开发中碰到了微信小程序video组件调用腾讯视频的问题，就趁机来总结一下。对方只给了我一个腾讯视频的网页链接，然后需要放置到小程序里面，大概开发前景是这样的。对方提供的视频链接： https://v.qq.com/x/page/s054310niqf.html 解决方案：通过腾讯视频小程序播放插件解决。官方文档代码示例说明：备注： vid是从腾讯视频网页链接中获取的，例如我的案例中，视频链接为：https://v.qq.com/x/page/s054310niqf.html ，则，s

【微信小程序】媒体组件（三）video

不想做菜鸟的小螃蟹

10-12

6917

最后一个微信小程序的媒体组件 1.先看下video的属性，与audio基本类似属性名类型默认值说明最低版本 src String 要播放视频的资源地址 duration Number 指定视频时长 1.1.0 controls Boolean true 是否显示默认播放控件（播放/暂停按钮

HarmonyOS Next 使用ArkWeb同层渲染案例_webview 同层渲染

最新发布

2401_84164721的博客

04-15

916

（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。// 性能知识点：此处componentId项确定且数量较少，使用了ForEach，在数据量多的情况下，推荐使用LazyForeEach。// 原生Grid组件，Grid中包含Image和Text。

微信小程序同层渲染原理剖析

moluchujian的博客

06-20

2151

「同层渲染」顾名思义则是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上，此时「原生组件层」已经不存在，原生组件此时已被直接挂载到 WebView 节点上。你几乎可以像使用非原生组件一样去使用「同层渲染」的原生组件，比如使用 view、image 覆盖原生组件、使用 z-index 指定原生组件的层级、把原生组件放置在 scroll-view、swiper、movable-view 等容器内，通过 WXSS 设置原生组件的样式等等。...

踩坑之路——微信小程序video原生组件层级过高解决方案

weixin_42556039的博客

10-30

4012

成品：可以看到成品其实不是完全解决了问题，如果有更好的方法可以告知一下我，谢谢。思路很简单，让video组件在不播放的时候隐藏，让替代品view呈现，当点击view时，让video显示出来。我写了一个小组件供大家参考： wxml <view class='view' style='{{style}};' bindtap='showVideo' hidden='{{sh...

原生组件同层渲染问题 uniapp 微信小程序

biubiubiuPlus的博客

11-04

1803

使用uniapp开发微信小程序，解决原生组件的层级高问题原生组件：map、video、canvas…… cover-view：覆盖在原生组件上的文本视图 cover-image：覆盖在原生组件上的图片缺点：不支持嵌套其它组件微信小程序：部分原生组件实现了同层渲染，在指定的基础库版本上，某些原生组件可无需使用cover-view覆盖坑： //pages.json文件下的配置，不定不能加"renderingMode": "seperated" "globalStyle": { "navigatio

小程序同层渲染

qq_41818857的博客

09-21

1582

小程序原生组件的渲染原理。我们知道，小程序的内容大多是渲染在 WebView 上的，如果把 WebView 看成单独的一层，那么由系统自带的这些原生组件则位于另一个更高的层级。两个层级是完全独立的，因此无法简单地通过使用 z-index 控制原生组件和非原生组件之间的相对层级。正如下图所示，非原生组件位于 WebView 层，而原生组件及 cover-view 与 cover-image 则位于另一个较高的层级：「同层渲染」顾名思义则是指通过一定的技术手段把原生组件直接渲染到 WebView 层级上，此

微信小程序video组件层级

weixin_33748818的博客

04-08

1006

主要解决video组件层侧过高，上滑时覆盖住顶部固定定位的导航wxml<video style="width: 100%;height=400px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b7...

小程序video层级过高！解决方案之------- cover-view！