video 视频

简介

视频组件。

基础库 5.1.1 版本起支持使用 dlt.createVideoContext 对 video 组件进行操作。

属性

属性名	类型	默认值	必填	说明	最低版本
src	string		是	要播放视频的资源地址，支持网络路径、本地临时路径	2.0.0
loop	boolean	FALSE	否	是否循环播放	2.0.0
muted	boolean	FALSE	否	是否静音播放	2.0.0
controls	boolean	TRUE	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）	2.0.0
autoplay	boolean	FALSE	否	是否自动播放	2.0.0
poster	string		否	视频封面的图片的资源地址。若 controls 属性值为 false 则设置 poster 无效	2.0.0
show-fullscreen-btn	boolean	TRUE	否	是否显示全屏按钮	2.0.0
bindplay	eventhandle		否	当开始/继续播放时触发 play 事件	2.0.0
bindpause	eventhandle		否	当暂停播放时触发 pause 事件	2.0.0
bindended	eventhandle		否	当播放到末尾时触发 ended 事件	2.0.0
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	2.0.0
bindfullscreenchange	eventhandle		否	视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal	2.0.0
bindwaiting	eventhandle		否	视频出现缓冲时触发	2.0.0
binderror	eventhandle		否	视频播放出错时触发	2.0.0
bindprogress	eventhandle		否	加载进度变化时触发，只支持一段加载。	2.0.0
bindloadedmetadata	eventhandle		否	视频元数据加载完成时触发。event.detail = {width, height, duration}	2.0.0
bindcontrolstoggle	eventhandle		否	切换 controls 显示隐藏时触发。	2.0.0
bindseekcomplete	eventhandler		否	seek 完成时触发（当用户拖动进度条完毕时触发）	2.0.0
bindmutedchange	eventhandler		否	视频静音变化时触发，event.detail = {muted: true}，muted 为 true 时表示当前视频静音，false 时表示未静音	3.6.0

使用示例

<!--index.dlt-->
<video
  :object-fit="objectFit"
  :autoplay="autoplay"
  :src="src"
  :show-fullscreen-btn="showFullscreenBtn"
  bind:bindplay="bindplay"
  bind:bindpause="bindpause"
  bind:bindended="bindended"
  bind:binderror="binderror"
  bind:bindtimeupdate="bindtimeupdate"
  bind:bindfullscreenchange="bindfullscreenchange"
  data-url="data--url--content"
  data-content="data--detail-content"
  id="myVideo"
></video>

<view bind:tap="triggerPlay">Click to Play</view>
<view bind:tap="triggerPause">Click to Pause</view>
<view bind:tap="triggerStop">Click to Stop</view>
<view bind:tap="triggerFullscreen">Click to Enter Fullscreen</view>
<view bind:tap="triggerSeek">Jump to Specific Position</view>

// index.js
Page({
  data: {
    loop: true,
    controls: false,
    autoplay: true,
    muted: true,
    src: '/images/big_buck_bunny.mp4',
    poster: '/images/test.png',
    objectFit: 'cover',
    showFullscreenBtn: false,
  },
  onReady() {
    console.log('page ready');
    this.videoContext = dlt.createVideoContext('myVideo');
  },
  bindplay(event) {
    console.log('bindplay', event);
  },
  bindpause(event) {
    console.log('bindpause', event);
  },
  bindended(event) {
    console.log('bindended', event);
  },
  binderror(event) {
    console.log('binderror', event);
  },
  bindtimeupdate(event) {
    console.log('bindtimeupdate', event);
  },
  bindfullscreenchange(event) {
    console.log('bindfullscreenchange', event);
  },
  triggerPlay() {
    this.videoContext && this.videoContext.play();
  },
  triggerPause() {
    this.videoContext && this.videoContext.pause();
  },
  triggerStop() {
    this.videoContext && this.videoContext.stop();
  },
  triggerFullscreen() {
    this.videoContext && this.videoContext.requestFullScreen({ direction: 0 });
    // Simulate exiting fullscreen after 5 seconds
    setTimeout(() => {
      this.videoContext && this.videoContext.exitFullScreen();
    }, 5000);
  },
  triggerSeek() {
    // Set playback progress to 10 seconds
    this.videoContext && this.videoContext.seek(10);
  },
});

/**
* event 示例：
    {
      detail: {
        currentTime: 0.871904,
        duration: 60.095011,
        height: 100,
        width: 100,
      },
      target: {
        dataset: {
          content: "data--detail-content",
          url: "data--url--content",
        },
        id: "myVideo",
        offsetLeft: 16,
        offsetTop: 318,
      },
      timeStamp: 11574.799999982119,
      type: "timeupdate",
    }
*/