video

优质

小牛编辑

126浏览

2023-12-01

视频组件

属性	类型	默认值	必填	说明
src	string		是	要播放视频的资源地址
autoplay	boolean	false	否	是否自动播放，只在初始化时有效，不能动态变更
muted	boolean	false	否	是否静音播放
controls	boolean	true	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）,仅安卓支持
loop	boolean	false	否	是否循环播放
bindplay	eventHandler		否	当开始/继续播放时触发play事件
bindpause	eventHandler		否	当暂停播放时触发 pause 事件
bindended	eventHandler		否	当播放到末尾时触发 ended 事件
bindtimeupdate	eventHandler		否	播放进度变化时触发
bindfullscreenchange	eventHandler		否	视频进入和退出全屏时触发，回调参数需要有direction。有效值为 vertical 或 horizontal
binderror	eventHandler		否	视频播放出错时触发
bindwaiting	eventHandler		否	视频出现缓冲时触发
bindloadeddata	eventHandler		否	视频资源开始加载时触发
bindloadedmetadata	eventHandler		否	开始加载元数据时触发
bindloadstart	eventHandler		否	开始加载数据
bindseeked	eventHandler		否	拖动进度条结束
bindseeking	eventHandler		否	正在拖动进度条
objectFit	string	contain	否	有效值contain fill ，只在初始化时有效，不能动态变更
initialTime	number	0	否	指定视频初始播放位置
poster	string		否	视频封面图片网络资源地址（基础库1.10.12开始支持）
mobilenet-hint-type	number	1	否	移动网络提醒样式：0是不提醒，1是提醒，默认值为1

支持的格式

支持格式	iOS	安卓
Mp4	支持	支持
mov	支持	支持
m4v	支持	支持
3gp	不支持	支持
avi	支持	不支持

示例代码

jxml

<view class="page-body">

    <video id="myVideo"
      src="http://storage.jd.com/videoares/%E6%8A%98%E5%8F%A0%E5%B1%8F%E9%97%AE%E9%A2%98.mp4"
      autoplay="{{autoplay}}"
      muted="{{muted}}"
      controls="{{controls}}"
      bindplay="play"
      bindpause="pauseHandler"
      bindended="endHandler"
      binderror="videoErrorCallback"
      objectFit="{{objectFit}}"
      initialTime="{{initialTime}}"
      poster="{{poster}}"
      mobilenet-hint-type="{{mobilenetHintType}}"
    ></video>
    <view class="page-control">
      <view class="page-control-row">
        <view class="page-control-title">initialTime</view>
        <input class="control-value" bindinput="initialTimeChanged" type="number" placeholder="在此处输入initialTime" value="{{initialTime}}"/>
      </view>
    </view>
    <view class="page-control">  
      <view class="page-control-sub-title">设置当前video objectFit</view>
      <view class="current-container">
        <radio-group bindchange="changeCurrent">
          <label class="default-label1"><radio value="contain" checked="{{true}}">contain</radio></label>
          <label class="default-label1"><radio value="fill" >fill</radio></label>
        </radio-group>
      </view>
    </view> 
    <view class="page-control">
      <view class="page-control-row">
        <view class="page-control-title">muted</view>
        <switch checked="{{muted}}" bindchange="changeMuted" />
      </view>
      <view class="page-control-row">
        <view class="page-control-title">loop</view>
        <switch checked="{{loop}}" bindchange="changeLoop" />
      </view>
    </view>
    <view class="page-control">
      <view class="page-control-row">
        <view class="page-control-title">controls(ios不支持)</view>
        <switch checked="{{controls}}" bindchange="changeControls"/>
       </view>
       <view class="page-control-row">
        <view class="page-control-title">poster</view>
        <input class="control-value" value="{{poster}}" maxlength='500' bindblur="bindInputBlur"/>
      </view>
    </view>
  </view>
</view>

Page({
  onReady: function (res) {
    this.videoContext = jd.createVideoContext('myVideo');
  },
  inputValue: '',
  data: {
    src: '',
    initialTime:0,
    objectFit:"contain",
    autoplay:false,
    muted:false,
    loop:false,
    controls:true,
    poster:'',
    mobilenetHintType:0,
  },
  bindInputBlur: function (e) {
    this.setData({
      poster: e.detail.value
    })
  },
  changeControls:function(){
    this.setData({
      controls:!this.data.controls
    })
  },
  changeCurrent:function(e) {
    this.setData({
      objectFit: e.detail.value
    });
  },
  initialTimeChanged :function(e){
    this.setData({
      initialTime: e.detail.value
    });
  },
  play:function(){
    console.log("点击播放按钮");
  },
  pauseHandler:function(){
    console.log("点击暂停按钮");
  },
  endHandler:function(){
    console.log("播放到末尾");
  },
  fullscreenchangeHandler:function(e){
    console.log('全屏变化:',e.detail);
  },
  videoErrorCallback: function (e) {
    console.log('视频错误信息:',e);
  },
  changeMuted:function(){
    this.setData({
      muted:!this.data.muted
    })
  },
  changeLoop:function(){
    this.setData({
      loop:!this.data.loop
    })
  }

});