native-video 视频

简介

非同层原生视频组件

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

属性

属性名	类型	默认值	必填	说明	最低版本
src	string		是	要播放视频的资源地址，支持网络路径、本地临时路径	4.0.0
loop	boolean	false	否	是否循环播放	4.0.0
muted	boolean	false	否	是否静音播放	4.0.0
autoplay	boolean	false	否	是否自动播放	4.0.0
poster	string		否	视频封面的图片的资源地址	4.0.0
direction	number	0	否	设置全屏方向；0: 正常竖直；90:屏幕逆时针 90 度；-90：屏幕顺时针 90 度	4.0.0
initial-time	number	0	否	指定视频初始播放位置	4.0.0
cache	boolean	false	否	是否缓存视频	4.0.0
bindplay	eventhandle		否	当开始/继续播放时触发 play 事件	4.0.0
bindpause	eventhandle		否	当暂停播放时触发 pause 事件	4.0.0
bindended	eventhandle		否	当播放到末尾时触发 ended 事件	4.0.0
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	4.0.0
bindwaiting	eventhandle		否	视频出现缓冲时触发	4.0.0
binderror	eventhandle		否	视频播放出错时触发	4.0.0
bindprogress	eventhandle		否	加载进度变化时触发，只支持一段加载。	4.0.0
bindloadedmetadata	eventhandle		否	视频元数据加载完成时触发。event.detail = {width, height, duration}	4.0.0
bindseekcomplete	eventhandle		否	seek 完成时触发	4.0.0
createdsuccess	eventhandle		否	视频组件创建完成后会返回，event.createdsuccess = true：创建成功；event.createdsuccess = false: 创建失败	4.0.0

使用示例

<!--index.dlt-->
<native-video
  data-url="data--url--content"
  data-content="data--detail-content"
  id="myVideo"
  :autoplay="autoplay"
  :poster="poster"
  :src="src"
  bind:bindplay="bindplay"
  bind:bindpause="bindpause"
  bind:bindended="bindended"
  bind:binderror="binderror"
  bind:bindtimeupdate="bindtimeupdate"
  bind:createdsuccess="createdsuccess"
  >
</native-video>

<view bind:tap="triggerPlay"> 点击播放 </view>
<view bind:tap="triggerPause"> 点击暂停 </view>
<view bind:tap="triggerStop"> 点击停止 </view>
<view bind:tap="triggerSeek"> 跳转到指定位置 </view>

// index.js
Page({
  data: {
    autoplay: true,
    src: '/images/big_buck_bunny.mp4',
    poster: '/images/test.png',
  },
  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);
  },
  createdsuccess(event) {
    // 成功时 event.createdsuccess 为 true；失败 event.createdsuccess 为 false
    console.log('createdsuccess result：', event.createdsuccess); // createdsuccess result：true
    console.log('createdsuccess target：', event.target); // 视频元素 dom 信息
  },
  // 通过 videoContext 调用视频方法
  triggerPlay() {
    this.videoContext && this.videoContext.play();
  },
  triggerPause() {
    this.videoContext && this.videoContext.pause();
  },
  triggerStop() {
    this.videoContext && this.videoContext.stop();
  },
  triggerSeek() {
    // 设置播放进度到 10 秒位置处
    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",
    }
*/

错误码对应关系

errCode	含义
-1	STATE_ERROR
-2	STATE_NETWORK_ERROR
-3	STATE_PARSE_ERROR
-4	STATE_URL_NULL