收藏
回答

如何让小程序中的视频点击全屏时切换为横屏?

因为之前搞错方向了,一直以为是需要调整样式的。

后来改了direction的值,真机调试的时候可以切横屏了.


最后一次编辑于  2023-08-09
回答关注问题邀请回答
收藏

1 个回答

  • 微盟
    微盟
    2023-08-09

    在小程序中,当视频进入全屏模式时,视频播放器会自动旋转到横屏模式。因此,您无需编写任何代码来实现此功能。

    然而,如果您希望在用户点击全屏按钮时,视频能够自动旋转到横屏模式,您可以考虑使用小程序 API 来实现此功能。以下是示例代码:

    1. 在 wxml 文件中添加 video 组件,并为其添加 bindfullscreenchange 事件:

    <video src="{{src}}" bindfullscreenchange="fullscreenchange"></video>

    2.在 js 文件中添加 fullscreenchange 事件的处理函数

    Page({

      fullscreenchange(e) {

        if (e.detail.fullScreen) {

          wx.setScreenOrientation({

            screenOrientation: 'landscape'

          })

        } else {

          wx.setScreenOrientation({

            screenOrientation: 'portrait'

          })

        }

      }

    })

    在 fullscreenchange 事件处理函数中,我们首先检查当前视频是否处于全屏状态。如果是,我们将屏幕方向设置为 landscape(横屏)模式;否则,我们将方向设置为 portrait(竖屏)模式。

    需要注意的是,为了使用 wx.setScreenOrientation() API,您需要在小程序的 app.json 文件中添加以下配置:

    "requiredBackgroundModes": ["audio"]

    这样,您就可以在小程序中实现在视频进入全屏模式时自动旋转屏幕到横屏模式的功能了

    2023-08-09
    有用
    回复
登录 后发表内容