视频播放器（Video player）

10.2 视频播放器（Video player）

weex默认提供的video组件只支持基本视频操作，本组件可支持更多选项，比如全屏播放等。此组件为APP内置组件，不需要前端import导入, 可直接在template里使用

支持播放视频及音频

使用规则

支持视频的播放、暂停、播放中隐藏控制栏、重新唤起控制栏、播放完展示重播入口，并支持全屏播放、竖屏播放、横屏播放，还包含视频加载中、加载失败、非wifi提醒、网络未连接异常情况展示。

视频播放

扫码预览

#示例

<template>
  <div class="wrapper">
    <dof-minibar
      title="视频"
      @dofMinibarLeftButtonClicked="back"
      @dofMinibarRightButtonClicked="minibarRightButtonClick"
    ></dof-minibar>
    <dof-catalog title="默认视频组件"></dof-catalog>
    <text></text>
    <video
      class="video"
      :src="src"
      autoplay
      controls
      @start="onstart"
      @pause="onpause"
      @finish="onfinish"
      @fail="onfail"
    ></video>
    <dof-catalog title="美居视频组件"></dof-catalog>
    <midea-video
      class="video"
      :src="src"
      :autoplay="true"
      :videoCover="videoCover"
      controls
      @start="onstart"
      @pause="onpause"
      @finish="onfinish"
      @fail="onfail"
    ></midea-video>
  </div>
</template>

<script>
import { DofMinibar, DofCatalog } from 'dolphin-weex-ui'
export default {
  components: { DofMinibar, DofCatalog },
  data() {
    return {
      // src: 'http://apiprod.midea.com/oss/auth/userDownload/Lj8fwe0uCIEh5eL1Ki3853bP/mcsp-cc-prod/114d7f354cdb4c7cad8697df7189ec80.mp4',
      src: 'http://midea-file.oss-cn-hangzhou.aliyuncs.com/meiju/meiju20171130.mp4',
      autoplay: true,
      videoCover:
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581676541660&di=118843a4c2aa9b570afbf8699cc48064&imgtype=0&src=http%3A%2F%2Fattachments.gfan.net.cn%2Fforum%2Fattachments2%2Fday_100930%2F100930194506853b7d1bc002d9.jpg'
    }
  },
  methods: {
    onstart() {},
    onpause() {},
    onfinish() {},
    onfail() {},
    minibarRightButtonClick() {
      const home = 'index.js'
      this.$MID.platform.name.toLowerCase() !== 'web' && this.$MID.route.push(home)
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
}
.video {
  width: 630px;
  height: 350px;
  margin-top: 60px;
  margin-left: 60px;
  margin-bottom: 60px;
}
</style>

#Attributes

Prop	Type	Required	Default	Description
src	String	Y	-	视频播放地址
autoplay	Boolean	Y	false	进入页面后是否自动播放视频
muted	Boolean	N	false	是否静音播放 美居6.7版本支持
controls	Boolean	N	false	是否显示控制层 美居6.7版本支持
loop	Boolean	N	false	是否循环播放 美居6.7版本支持
isShowFullScreenBtn	Boolean	N	false	是否显示全屏按钮（默认显示）美居8.10版本支持
hideNetTips	Boolean	N	false	是否显示网络状态提示、加载失败提示灯 美居8.10支持，默认显示
angle	Number	N	0	设置视频旋转角度（8.13）
cache	boolean	N	false	视频是否需要缓存（8.12）

#Events

事件名	说明	回调参数
start	视频开始播放时触发	-
pause	视频暂停播放时触发	-
finish	视频播放完毕时触发	-
fail	视频播放失败时触发	-
readyToPlay	视频资源加载成功后触发	-
videoClick	点击视频时触发 美居8.10版本支持	-