Media components

Media components provide video playback and image preview.

Video

Basic usage

<video
  id="myVideo"
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  controls
  style="width: 100%;"
/>

Programmatic control

Get a video context with createVideoContext:

const videoCtx = woo.createVideoContext('myVideo')

// 播放
videoCtx.play()

// 暂停
videoCtx.pause()

// 跳转到指定时间（秒）
videoCtx.seek(30)

// 全屏
videoCtx.requestFullScreen()
videoCtx.exitFullScreen()

Full example

<template>
  <div class="page">
    <video
      id="courseVideo"
      :src="videoUrl"
      :poster="posterUrl"
      style="width: 100%; border-radius: 8px;"
    />
    <div class="controls">
      <button @click="togglePlay">
        {{ isPlaying ? '暂停' : '播放' }}
      </button>
      <button @click="jumpForward">快进 10s</button>
      <button @click="fullscreen">全屏</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import woo from 'mini-sdk'

const videoUrl = ref('https://example.com/course.mp4')
const posterUrl = ref('https://example.com/poster.jpg')
const isPlaying = ref(false)
let videoCtx = null
let currentTime = 0

onMounted(() => {
  videoCtx = woo.createVideoContext('courseVideo')
})

function togglePlay() {
  if (isPlaying.value) {
    videoCtx.pause()
  } else {
    videoCtx.play()
  }
  isPlaying.value = !isPlaying.value
}

function jumpForward() {
  currentTime += 10
  videoCtx.seek(currentTime)
}

function fullscreen() {
  videoCtx.requestFullScreen()
}
</script>

Image preview

Use woo.previewImage() to preview a list of images in full screen:

await woo.previewImage({
  urls: [
    'https://example.com/photo1.jpg',
    'https://example.com/photo2.jpg',
    'https://example.com/photo3.jpg',
  ],
  current: 'https://example.com/photo2.jpg', // 初始显示第 2 张
})

Full example: 3×3 image grid

<template>
  <div class="image-grid">
    <img
      v-for="(url, index) in images"
      :key="index"
      :src="url"
      @click="preview(index)"
      class="grid-image"
    />
  </div>
</template>

<script setup>
import woo from 'mini-sdk'

const images = [
  'https://example.com/1.jpg',
  'https://example.com/2.jpg',
  'https://example.com/3.jpg',
  'https://example.com/4.jpg',
  'https://example.com/5.jpg',
  'https://example.com/6.jpg',
]

function preview(index) {
  woo.previewImage({
    urls: images,
    current: images[index],
  })
}
</script>

<style scoped>
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px;
}
.grid-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}
</style>

Input focus

Control input focus with createInputContext:

const inputCtx = woo.createInputContext('searchInput')

// 自动聚焦
inputCtx.focus()

// 失焦
inputCtx.blur()

Node queries

Query node information with createSelectorQuery:

const query = woo.createSelectorQuery()

// 查询单个节点
const rect = await query.select('#header').boundingClientRect()
console.log('Header 高度：', rect.height)

// 查询滚动位置
const scroll = await query.select('#scrollView').scrollOffset()
console.log('滚动距离：', scroll.scrollTop)