video

更新时间：2023/05/30 访问次数：6874

一、简介
二、使用示例
三、属性及事件
四、方法
五、FAQ

说明：本文档适用于小部件3.0。

一、简介

video组件用于在小部件场景中进行视频播放，用户可对播放器进行UI操作，开发者则可通过API对视频播放进行控制以及接收组件事件获得播放状态。

1.淘宝 App 支持版本

iOS：10.3.10及以上版本。

Android：10.3.16及以上版本。

2.小部件构建支持版本

需要小部件 2.0。

二、使用示例

1.效果示例

2.示例代码

.axml

<view>
  <video id="myVideo" 
    class="video"
    src="{{src}}"
    autoplay="{{autoplay}}"
    loop="{{isLooping}}"
    muted="{{muted}}"
    controls="{{showControls}}"
    object-fit="{{objectFit}}"
    initial-time="{{initTime}}"
    show-mute-btn="{{showMuteBtn}}"
    mobilenet-hint-type="{{mobilenetHintType}}"
    show-thin-progressBar="{{showThinProgressBar}}"
    enable-progress-gesture="{{enableProgressGesture}}"
    
    onLoading="onLoading"
    onRenderStart="onRenderStart"
    onPlay="onPlay"
    onPause="onPause"
    onEnded="onEnded"
    onStop="onStop"
    onTimeUpdate="onTimeUpdate"
    onError="onError"
    />
  <view class="btn" onTap="play"> play </view>
  <view class="btn" onTap="pause"> pause </view>
  <view class="btn" onTap="seek"> seek:5 </view>
  <view class="btn" onTap="mute"> mute </view>
  <view class="btn" onTap="stop"> stop </view>
</view>

.js

Component({
  data: {
    src: "https://cloud.video.taobao.com//play/u/907349826/p/1/e/6/t/1/315729994409.mp4",
    autoplay:true,
    isLooping:true,
    muted:true,
    showControls:true,
    objectFit:"contain",
    initTime: 5,
    showMuteBtn:true,
    mobilenetHintType:1,
    showThinProgressBar:true,
    enableProgressGesture:true
  },
  didMount() {
    this.isMute = true;
    this.videoContext = my.createVideoContext('myVideo');
  },
  didUpdate() { },
  didUnmount() { },
  methods: {
    // 组件事件
    onLoading(event) {
      console.log("onLoading");
    },
    onRenderStart(event) {
      console.log("onRenderStart");
    },
    onPlay(event) {
      my.alert({ content: "onPlay"});
    },
    onPause(event) {
      my.alert({ content: "onPause"});
    },
    onEnded(event) {
      my.alert({ content: "onEnded"});
    },
    onStop(event) {
      my.alert({ content: "onStop"});
    },
    onTimeUpdate(event) {
      console.log("onTimeUpdate");
    },
    onError(event) {
      my.alert({ content: "onError"});
    },
    
    // API调用
    play() {
      this.videoContext.play();
    },
    pause() {
      this.videoContext.pause();
    },
    stop() {
      this.videoContext.stop();
    },
    seek() {
      this.videoContext.seek(5);
    },
    mute() {
      this.isMute = !this.isMute;
      this.videoContext.mute(this.isMute);
    },
  },
});

.acss

.video {
  width: 650rpx;
  height: 360rpx;
}

.btn {
  width: 200rpx;
  height: 50rpx;
  background-color: #f35d0d;
  margin-top: 15rpx;
}

三、属性及事件

1.组件属性

属性	类型	描述	是否支持	将要支持
style	String	内联样式。	是	/
class	String	外部样式名。	是	/
src	String	要播放视频的资源地址	是	/
poster	String	视频封面图的 url，支持 jpg、png 等图片，如 https://***.jpg。如果不传，视频首帧前默认黑屏。	是	/
object-fit	String	当视频大小与 video 容器大小不一致时，视频的填充模式。 contain：保持视频宽高比，使视频完整展示在容器中，上下/左右可能会留有黑边 cover-保持视频宽高比，在容器中填满展示，可能会被裁剪 fill：将视频内容按容器尺寸拉伸填满展示，可能会改变视频宽高比默认值： contain。	是	/
initial-time	Number	指定视频初始播放位置，单位 s。	是	/
controls	Boolean	是否显示默认播放控件（底部工具条，包括播放/暂停按钮、播放进度、时间）。默认值： true	是	/
autoplay	Boolean	是否自动播放。默认值： false。	是	/
loop	Boolean	是否循环播放。默认值： false。	是	/
muted	Boolean	是否静音播放。默认值：false。	是	/
show-thin-progress-bar	Boolean	当底部工具条隐藏时，是否显示细进度条（controls=false 时设置无效）。默认值： false。	是	/
show-mute-btn	Boolean	是否展示工具栏上的静音按钮。默认值： true。	是	/
enable-progress-gesture	Boolean	全屏模式下是否开启控制进度的手势。默认值： false。	是	/
mobilenet-hint-type	Number	移动网络提醒样式。 0 - 不提醒 1 - tip 提醒 2 - 阻塞提醒(无消耗流量大小) 3 - 阻塞提醒(有消耗流量大小提醒) 默认值：1。	是	/
onPlay	EventHandle	当开始/继续播放时触发 play 事件。	是	/
onPause	EventHandle	当暂停播放时触发 pause 事件。	是	/
onEnded	EventHandle	当播放到末尾时触发 ended 事件。	是	/
onTimeUpdate	EventHandle	播放进度变化时触发，event.detail = {currentTime: '当前播放时间',userPlayDuration:'用户实际观看时长',videoDuration:'视频总时长'} 。	是	/
onLoading	EventHandle	视频出现缓冲时触发。	是	/
onError	EventHandle	视频播放出错时触发。	是	/
onStop	EventHandle	视频播放终止。	是	/
onRenderStart	EventHandle	当视频加载完真正开始播放时触发。	是	/
onTap	EventHandle	点击视频 view 时触发，event.detail = {ptInView:{x:0,y:0}}。	否	否
poster-size	String	当 poster 高宽比跟视频高宽不匹配时，如何显示 poster，设置规则同 background-size 一致。默认值： contain。	否	否
duration	Number	为无法读取时长的视频设置时长，单位 s。	否	否
direction	Number	设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）	否	否
show-fullscreen-btn	Boolean	是否显示全屏按钮。默认值： true。	否	否
show-play-btn	Boolean	是否显示视频底部控制栏的播放按钮。默认值： true。	否	否
show-center-play-btn	Boolean	是否显示视频中间的播放按钮。默认值： true。	否	否
onFullScreenChange	EventHandle	视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 取为 vertical 或 horizontal。	否	否
onUserAction	EventHandle	用户操作事件，event.detail = {tag:"mute", value:0}，tag 为用户操作的元素，目前支持的 tag 有：play（底部播放按钮）、centerplay（中心播放按钮）、mute（静音按钮）、fullscreen（全屏按钮）、retry（重试按钮）、mobilenetplay（网络提醒的播放按钮）。	否	否
floating-mode	String	浮窗设置。暂时不支持全局浮窗。可选值： none：无浮窗。 page：页面内浮窗。默认值：none。	否	否

注：属性值目前无法通过setData进行动态修改。

2.组件事件

名称	最低支持版本	描述
onLoading	10.3.0	视频出现缓冲时触发
onRenderStart	10.3.0	当视频加载完真正开始播放时触发
onPlay	10.3.0	当开始/继续播放时触发
onPause	10.3.0	当暂停播放时触发
onEnded	10.3.0	当播放到末尾时触发
onStop	10.3.0	视频播放终止时触发，销毁播放器实例，释放资源
onTimeUpdate	10.3.0	播放进度变化时触发，参数说明： currentTime: "当前播放时间（单位s）" userPlayDuration: "用户实际观看时长（单位s）" videoDuration: "视频总时长（单位s）"
onError	10.3.0	视频播放出错时触发

四、方法

名称	参数名	参数类型	描述
play	/	/	播放
pause	/	/	暂停播放
stop	/	/	停止播放，销毁播放器实例，释放资源
seek	time	Number	跳转到指定位置，单位为秒（s）
mute	ison	Boolean	切换静音状态，参数值：true-静音，false-打开声音
playbackRate	rate	Number	回访速率

五、FAQ

1.setData动态修改video属性的支持计划？

由于视频播放器的大多数属性在初始化后就无法修改，因此目前不支持通过setData方法来修改video属性，建议提前获取相关属性，在初始化video标签时进行设置；

鉴于实际应用中对修改src有较多诉求，src的修改会在后续版本进行支持。

2.video的封面（poster）、全屏播放（show-fullscreen-btn）的支持计划？

poster功能已支持，参见上方属性表格；show-fullscreen-btn在小部件应用场景有限，近期暂没有计划支持。

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

开放平台

店铺动态卡片-开发指引