MyVideo 基础视频

基础视频播放器组件。

引入

组件位置

/pages/component/myVideo/index

在 app.json 或 index.json 中引入组件：

"usingComponents": {
  "myVideo": "/pages/component/myVideo/index"
}

代码演示

基础用法

<myVideo 
  src="{{ videoUrl }}" 
  autoplay="{{ false }}"
  bind:loadedmetadata="onVideoLoaded"
/>

Page({
  data: {
    videoUrl: 'https://example.com/video.mp4'
  },
  onVideoLoaded(e) {
    console.log('视频元数据已加载', e.detail);
  }
});

全屏播放

可以通过 selectComponent 获取组件实例并调用全屏方法：

const videoComp = this.selectComponent('#myVideo');
videoComp.playFullScreen();

API

Props

参数	说明	类型	默认值
videoId	视频组件标识 ID	string	'myVideo'
src	视频资源地址	string	''
controls	是否展示播放控制栏	boolean	true
autoplay	是否自动播放	boolean	true
width	视频宽度	string	'100%'
height	视频高度	string	'464rpx'
loop	是否循环播放	boolean	false
showBackgroundPlaybackButton	是否展示后台播放按钮	boolean	false

Events

事件名	说明	回调参数
loadedmetadata	视频元数据加载完成时触发	detail: Object
onFullscreenchange	全屏状态变化时触发	detail: Object

Methods

通过 selectComponent 调用。

方法名	说明	参数
playFullScreen	进入全屏并播放	-
pause	暂停播放	-