Video 视频

基础用法

<div style="width:400px; height: 225px; margin-bottom: 100px;">
  <se-video
    src="http://chimee.org/vod/1.mp4"
    kernel="mp4"
    title="小森林·春秋"
    controls
    show-fullscreen-btn
    show-mute-btn
    muted
    @ended="onEnded"
    @timeupdate="onTimeupdate"
    @fullscreenchange="onFullscreenchange"
    @waiting="onWaiting"
    @progress="onProgress"
    @error="onError"
  ></se-video>
</div>
<se-video
  ref="myVideo"
  src="https://node.imgio.in/demo/birds.m3u8"
  kernel="hls"
  :poster="poster"
  :title="title"
  :controls="controls"
  :muted="muted"
  :loop="loop"
  :autoplay="autoplay"
  :initial-time="initTime"
  :object-fit="objectFit"
  :show-fullscreen-btn="showFullscreenBtn"
  :show-mute-btn="showMuteBtn"
  @play="onPlay"
  @pause="onPause"
  @ended="onEnded"
  @timeupdate="onTimeupdate"
  @fullscreenchange="onFullscreenchange"
  @waiting="onWaiting"
  @progress="onProgress"
  @error="onError"
></se-video>
<br />
<se-button @click="emitPlay">播放</se-button>
<se-button @click="emitPause">暂停</se-button>
<se-button @click="emitStop">停止</se-button>
<se-button @click="emitSeek">跳转到3s</se-button>
<se-button @click="requestFullScreen">进入全屏</se-button>
<se-button @click="exitFullScreen">退出全屏</se-button>
<br />
<br />
<label>
  设置视频标题：
  <se-input :value="title" @blur="titleChange" />
</label>
<label>
  是否显示控制面板：
  <se-switch :checked="controls" @change="controlsChange" />
</label>
<label>
  是否静音：
  <se-switch :checked="muted" @change="mutedChange" />
</label>
<label>
  是否显示音量按钮：
  <se-switch :checked="showMuteBtn" @change="showMuteBtnChange" />
</label>
<label>
  是否显示全屏按钮：
  <se-switch :checked="showFullscreenBtn" @change="showFullscreenBtnChange" />
</label>
<label>
  是否循环播放：
  <se-switch :checked="loop" @change="loopChange" />
</label>
<label>
  设置倍速：
  <se-select :value="rate" @change="rateChange" size="mini">
    <se-option
      v-for="(option, index) in options"
      :key="index"
      :value="option.value"
      :label="option.label"
    ></se-option>
  </se-select>
</label>
<label>
  设置播放地址：
  <se-select :value="src" @change="srcChange" size="mini">
    <se-option
      v-for="(option, index) in srcOptions"
      :key="index"
      :value="option.value"
      :label="option.label"
    ></se-option>
  </se-select>
</label>
<label>
  设置视频封面：
  <se-select :value="poster" @change="posterChange" size="mini">
    <se-option
      v-for="(option, index) in posterOptions"
      :key="index"
      :value="option.value"
      :label="option.label"
    ></se-option>
  </se-select>
</label>
<label>
  设置视频的表现形式：
  <se-select :value="objectFit" @change="objectFitChange" size="mini">
    <se-option
      v-for="(option, index) in objectFitOptions"
      :key="index"
      :value="option.value"
      :label="option.label"
    ></se-option>
  </se-select>
</label>
<script>
  export default {
    data() {
      return {
        videoContext: null,
        rate: 1,
        options: [
          { value: 0.5, label: 0.5 },
          { value: 0.8, label: 0.8 },
          { value: 1.0, label: 1.0 },
          { value: 1.25, label: 1.25 },
          { value: 1.5, label: 1.5 },
          { value: 2, label: 2 }
        ],
        src: 'https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4',
        srcOptions: [
          { value: 'https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4', label: '影片1' },
          { value: 'https://www.w3school.com.cn/i/movie.ogg', label: '影片2' }
        ],
        poster: 'https://p3.ssl.qhimg.com/t01202f3bb176275d06.png',
        posterOptions: [
          { value: 'https://p3.ssl.qhimg.com/t01202f3bb176275d06.png', label: '封面1' },
          { value: 'https://p0.ssl.qhimg.com/t011ac6ee181d99574e.jpg', label: '封面2' }
        ],
        objectFit: 'contain',
        objectFitOptions: [
          { value: 'contain', label: '默认' },
          { value: 'fill', label: '填充' },
          { value: 'cover', label: '等比例填充' }
        ],
        controls: true,
        title: '小森林·春秋',
        muted: false,
        loop: false,
        autoplay: false,
        initTime: 0,
        showFullscreenBtn: true,
        showMuteBtn: true
      }
    },
    methods: {
      onPlay(e) {
        console.log('on play')
      },
      onPause() {
        console.log('on pause')
      },
      onEnded() {
        console.log('on end')
      },
      onTimeupdate({ detail }) {
        console.log('on timeupdate', detail)
      },
      onFullscreenchange({ detail }) {
        console.log('on fullscreen', detail)
      },
      onWaiting() {
        console.log('on waiting')
      },
      onProgress({ detail }) {
        console.log('on progress', detail)
      },
      onError(error) {
        console.log(`on error`, error)
      },
      emitPlay() {
        this.videoContext.play()
      },
      emitPause() {
        this.videoContext.pause()
      },
      emitStop() {
        this.videoContext.stop()
      },
      emitSeek() {
        this.videoContext.seek(3)
      },
      requestFullScreen() {
        this.videoContext.requestFullScreen()
      },
      exitFullScreen() {
        this.videoContext.exitFullScreen()
      },
      rateChange(v) {
        this.rate = v
        this.videoContext.playbackRate(v)
      },
      srcChange(v) {
        this.src = v
      },
      controlsChange(v) {
        this.controls = v
      },
      titleChange(e) {
        this.title = e.detail.value
      },
      mutedChange(v) {
        this.muted = v
      },
      loopChange(v) {
        this.loop = v
      },
      posterChange(v) {
        this.poster = v
      },
      objectFitChange(v) {
        this.objectFit = v
      },
      showMuteBtnChange(v) {
        this.showMuteBtn = v
      },
      showFullscreenBtnChange(v) {
        this.showFullscreenBtn = v
      }
    },
    mounted() {
      this.videoContext = this.$createVideoContext('myVideo')
    }
  }
</script>
<style>
  label + label {
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>

Props

Events

Global Methods

VideoContext

对微信小程序属性和方法的支持程度如下：