【小程序】媒体API能力集成指南——视频、原生视频、WebView、相机API

视频 API

createVideoContext 

ty.createVideoContext(string id)

创建 video 上下文 VideoContext 对象。

参数

string id

video 组件的 id

返回值

VideoContext

VideoContext

VideoContext 实例，可通过 ty.createVideoContext 获取。

VideoContext 通过 id 跟一个 video 组件绑定，操作对应的 video 组件。

方法

VideoContext.play

VideoContext.play()

播放视频

VideoContext.pause

VideoContext.pause()

暂停视频

VideoContext.stop

VideoContext.stop()

停止视频

VideoContext.playbackRate

VideoContext.playbackRate(number rate)

设置倍速播放

VideoContext.seek

VideoContext.seek(number position)

跳转到指定位置

参数

number position

跳转到的位置，单位 s

VideoContext.sendDanmu

VideoContext.sendDanmu(Object data)

发送弹幕

参数

Object data

弹幕内容

👉 立即开发。

原生视频 API

createNativeVideoContext  

ty.createNativeVideoContext(string id)

创建 native-video 上下文 NativeVideoContext 对象。

参数

string id

native-video 组件的 id

返回值

NativeVideoContext

NativeVideoContext

VideoContext 实例，可通过 ty.createNativeVideoContext 获取。

NativeVideoContext 通过 id 跟一个 native-video 组件绑定，操作对应的 native-video 组件。

方法

NativeVideoContext.play

NativeVideoContext.play()

播放视频

NativeVideoContext.pause

NativeVideoContext.pause()

暂停视频

NativeVideoContext.stop

NativeVideoContext.stop()

停止视频

NativeVideoContext.playbackRate

NativeVideoContext.playbackRate(number rate)

设置倍速播放 

NativeVideoContext.seek

NativeVideoContext.seek(number position)

跳转到指定位置

参数

number position

跳转到的位置，单位 s

👉 立即开发。

WebView API

WebviewContext

WebviewContext 实例，可通过 ty.createWebviewContext 获取。

基础库 >= 2.15.0

interface WebviewContext {
  postMessage(msg: { data: Record<string, any>}): void;
  reload(options?: {
    su***ess?: () => void;
    fail?: () => void;
    ***plete?: () => void;
  }): void;
}

方法

postMessage

发送数据到 web-view 页面中，页面内通过 @tuya-miniapp/jssdk 进行接收。

reload

刷新当前 web-view 页面。

ty.createWebviewContext(mapId: string)

用于创建 WebviewContext 实例

示例

<web-view id="w1" src="https://your-domain.***"></web-view>

Page({
  onReady() {
     this.webviewContext = ty.createWebviewContext('w1');
  },
 
  sendMessage() {
    this.webviewContext.postMessage({
      data: {
        msg: 'send to html ' + Date.now(),
      },
    });
  }
})

WebviewContext.postMessage

发送消息到 web-view 标签的页面中。

type postMessage = (msg: { data: Record<string, any>}) => void;

const webviewContext = ty.createWebviewContext('id')
webviewContext.postMessage({
  data: {a: 1}
})

在 web-view 的 页面中，需要通过 @tuya-miniapp/jssdk 进行消息的接收

import { miniProgram } from '@tuya-miniapp/jssdk'
 
miniProgram.onMessage(event => {
  const messageData = event.data
  // messageData => {a: 1}
})

WebviewContext.reload

刷新当前 web-view 页面

type reload = (options?: { 
  su***ess?: () => void; 
  fail?: () => void; 
  ***plete?: () => void; 
}) => void;

const webviewContext = ty.createWebviewContext('id')
webviewContext.reload()

👉 立即开发。

相机API 

createCameraContext 

ty.createCameraContext()

基础库 2.2.0 开始支持, 低版本需做兼容处理。

创建 camera 上下文 CameraContext 对象。

返回值

CameraContext

CameraContext

CameraContext 实例，可通过 ty.createCameraContext 获取。

CameraContext 与页面内唯一的 camera 组件绑定，操作对应的 camera 组件。

方法

CameraContext.takePhoto

拍摄照片

CameraContext.setZoom

设置缩放级别

takePhoto

CameraContext.takePhoto(Object object)

基础库 2.2.0 开始支持, 低版本需做兼容处理。

功能描述

拍摄照片

参数

Object Object

object.su***ess 回调函数

参数

Object res

setZoom

CameraContext.setZoom(Object object)

基础库 2.2.0 开始支持, 低版本需做兼容处理。

功能描述

设置缩放级别

参数

Object Object

object.su***ess 回调函数

参数

Object res

👉 立即开发。