wx.createVideoContext 全屏播放

最新推荐文章于 2024-08-07 16:40:50 发布

原创最新推荐文章于 2024-08-07 16:40:50 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#wx.createVideoContext

小程序专栏收录该内容

10 篇文章

订阅专栏

本文探讨了在微信小程序中实现视频全屏播放的方法。通过为不同页面的video组件分配唯一的ID，确保了多个视频播放功能在同一应用中互不干扰。文章详细介绍了如何使用wx.createVideoContext创建视频上下文，并调用requestFullScreen和play方法来实现全屏播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们小程序里面有两个页面会需要进入 video 的全屏播放
new-moment 我定义 video 的id 是 playVideo
然后点击播放的时候触发一个方法内容写成

this.videoContext = wx.createVideoContext('myNewVideo')
this.videoContext.requestFullScreen()
this.videoContext.play()

这样就可以进入全屏播放

但是
我再另一个页面 moment-detail 中也有一个 video 播放的功能，这时候如果你的 video id属性不能和其他页面的 video 名字重合如果重合就不能进入全屏播放了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

划水运动员9527

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序视屏(video)直接横屏（全屏）播放

yiyueqinghui的博客

01-08

3万+

html &amp;lt;view&amp;gt; &amp;lt;video id=&quot;myVideo&quot; src=&quot;视屏地址&quot; enable-danmu danmu-btn controls&amp;gt;&amp;lt;/video&amp;gt; &amp;lt;/view&

微信小程序之PC端video 全屏播放时，通过键盘来控制播放以及播放进度

weixin_44936767的博客

02-09

204

【代码】微信小程序之PC端video 全屏播放时，通过键盘来控制播放以及播放进度。

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

wx.createVideoContext()

lsyhaoshuai的博客

07-15

1817

wx.createVideoContext() 可以用这个函数控制视频的暂停与播放 1.wxml中 2.js中利用这个函数获得该video var me = this me.video=wx.createVideoContext('myvideo',me) onHide:function(){ var me = this me.video.pause(); } onShow:function(){ var me = this me.video.play(); } ...

videoContext.requestFullScreen无法调起全屏

igcnfjbnxjsb的博客

08-07

903

2、在之前也用过video实现全屏操作，有好几个页面是需要点击调起全屏。当时没唤起成功，后续查阅资料是因为我定义 video 的id 和之前的一样，需要注意的是 video中id命名不能和其他页面的video名字重合，否则无法唤起全屏。我在微信开发者工具上编译，效果：视频没有调起但是后台有视频的声音，另外我调用的@fullscreenchange函数在微信开发者后台也没有打印日志。1、小程序首页有一个点击唤起video视频全屏播放的一个操作，我原先是在子组件里面写的。

计算机小程序视频,微信小程序视频组件控制wx.createVideoContext(videoId)

weixin_33514582的博客

07-21

847

微信小程序视频组件控制wx.createVideoContext(videoId)由?﹏???ζ???﹏﹏?创建，Carrie 最后一次修改2016-12-07 wx.createVideoContext(videoId)创建并返回 video 上下文videoContext对象videoContextvideoContext通过 videoId...

小程序的 wx.createVideoContext 使用

张小胖

02-26

7162

在video 设一个 id <video id="myVideo" src=""></video> 然后在函数里面使用createVideoContext let videoContext = wx.createVideoContext('myVideo', this) videoContext.seek(that.data.video_real_time) 做这个文章主要的目的就是有时候createVideoContext 里面的方法不起作用...

小程序之发送弹幕——wx.createVideoContext（）

PS-ER的专栏

03-29

5586

小程序之发送弹幕这个是官方定义：wx.createVideoContext(videoId, this)创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video/> 组件二、下面是效果图，这时候在开发工具中的样子，希望能理解页面代码：<view class="section tc"> &lt...

通过获取视频的DOM,不用wx.createVideoContext('myVideo')代码，可以如何实现

07-15

在微信小程序中，对于一些操作，如控制音量、全屏等，可能需要使用wx.createVideoContext方法获取视频上下文来实现。如果你只是简单地实现播放功能，使用DOM元素的方法是可行的。希望能帮到你！如有疑问，请随时...

<view class="video" v-if="item && item.video_url"> <Player style="width: 100%;" :key="index" :index="index" :video-url="item.video_url" :cover-url="item.cover_url" @play="handleVideoPlay" /> </view> handleVideoPlay(index) { if(this.currentIndex !== null && this.currentIndex !== index) { const prevVideo = uni.createVideoContext('video'+this.currentIndex, this) prevVideo.pause() prevVideo.exitFullScreen() } this.currentIndex = index }, <template> <view class="video-box"> <video style="width: 100%;" :id="'video'+index" :src="videoUrl" :poster="coverUrl" :controls="true" :show-fullscreen-btn="true" :show-center-play-btn="true" :enable-progress-gesture="true" @fullscreenchange="handleFullscreen" @play="onPlay" @pause="onPause" @click="toggleFullscreen" ></video> </view> </template> <script> export default { props: { videoUrl: String, coverUrl: String, index: Number }, methods: { toggleFullscreen() { // const videoCtx = uni.createVideoContext('video'+this.index, this) // if(this.isFullscreen) { // videoCtx.pause() // videoCtx.exitFullScreen() // } else { // // 关键修改：移除方向参数 // videoCtx.requestFullScreen() // } const videoCtx = uni.createVideoContext('video'+this.index, this) // #ifdef APP-PLUS plus.screen.lockOrientation('portrait-primary') // 临时允许横屏 // #endif videoCtx.requestFullScreen() }, handleFullscreen(e) { this.isFullscreen = e.detail.fullScreen // #ifdef APP-PLUS if(!e.detail.fullScreen) { plus.screen.lockOrientation('portrait-primary') } // #endif // #ifdef APP-PLUS && IOS plus.screen.unlockOrientation() plus.navigator.setStatusBarStyle('dark') // #endif }, onPlay() { this.$emit('play', this.index) }, onPause() { this.$emit('pause', this.index) } }, data() { return { isFullscreen: false } } } </script> <style> .video-box{ width: 100%; height: 100vh; /* 强制占满屏幕高度 */ } </style> uniapp 安卓点击视频播放全屏按钮后也是横屏的怎么在代码里禁止

最新发布

07-22

但是，这个方案有一个缺点：我们无法使用原生的全屏API，所以视频的播放控制（如播放、暂停、进度调整）都需要自己实现。而且，在安卓设备上，视频可能会被系统控件覆盖，所以我们需要使用小程序的cover-view组件来...

小程序开发API之视频保存、选择及操作视频VideoContext 对象

M.Siebel

01-30

5662

效果展示 wx.saveVideoToPhotosAlbum(Object object) 保存视频到系统相册，调用前需要用户授权 scope.writePhotosAlbum saveVideoToPhotosAlbum参数 wx.chooseVideo(Object object) 拍摄视频或从手机相册中选视频。 wx.chooseVideo参数 object.sourceType 的合...

微信小程序视频自动全屏

zhouyuyy的博客

06-19

4914

test.wxml <video id="myVideo" src="cloud://test-qu7lc.7465-test-qu7lc-1302432879/video/l3100gw1zos.mp4" autoplay='{{true}}' show-progress='{{false}}' controls='{{true}}' bindended='endAction'></video> test.js // 自动全屏 onShow: function () { t

requestFullScreen 全屏

weixin_42390878的博客

12-18

2310

手指双击全屏显示, 用Hammer.js 库 <script src="https://hammerjs.github.io/dist/hammer.js"></script> 注：以下全屏代码不适用于苹果系统其外参考代码：转自：https://my.oschina.net/itblog/blog/228654 function fullScreen() ...

小程序组件 video 进入全屏无效

assassin_0302的博客

12-03

2282

this.data.videoContext = wx.createVideoContext('myVideo'+index,this) this.data.videoContext.requestFullScreen({ direction: 0 }) this.data.videoContext.play() 在创建video上下文实例的方法后面加个this

小程序全屏播放和图片查看

qq_43921510的博客

01-17

582

//全屏播放 fullscreenVideo(e){ this.videoContext = wx.createVideoContext('video' + e.currentTarget.dataset.index); this.videoContext.requestFullScreen({ direction: 0 }); }, //可以查看media和image wx.previewMedia({ sources: media,//所有的 .

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

m0_52946104的博客

02-17

3752

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

微信小程序视频基本操作

冲出仁川，走出马德里，故事还会再继续

03-21

6598

微信小程序视频基本操作1、视频1.1 wx.createVideoContext(string id,Object this)接口1.1.2 VideoContext对象常用函数1.1.3 小案例1.2 wx.chooseVideo()接口object.success 回调函数参数Object res示例代码1.2.1 小案例1.3 wx.saveVideoToPhotosAlbum(Object object)接口1.3.1 案例 1、视频小程序提供了wx.createVideoContext(st

微信小程序video控件的使用