video

概述

视频播放器。

支持 HTTP/HTTPS/RTSP 协议。在主流的视频编码格式(如：H.263，H.264，MPEG-4 等)和主流的音频编码格式(AAC，FLAC，MP3 等)下，支持主流的音视频封装格式如：MPEG-4(.mp4)、3GPP(.3gp)、MPEG-TS(.ts，not seekable)、Matroska(.mkv)、Ogg(.ogg)等。

使用限制

子组件

不支持。

属性

支持 <text> 属性，同时除了支持 通用属性 以外，还支持如下属性。

{ "text": "hello", "color": "#0000ff", "time": 10 }

headers:{key: 'value'}

"minbufferms":50000

"maxbufferms":50000

样式

除了支持 通用样式以外，还支持如下样式。

object-fit 类型说明(1035+)：

事件

不支持swipe事件，低于1040版本点击视频播放控制条不会触发click事件。除了支持 通用事件 以外，还支持如下事件。

方法

snapshot方法的success返回值data对象有以下属性：

snapshot方法的fail返回值：

getSupportedVideoCodecs方法的callback返回值：

全屏显示自定义组件（1080+）

您经常会遇到需要全屏显示自定义组件的场景，如“画质切换”，“分享”按钮等。

1080 版本开始，支持此特性。请按照以下步骤实现：

1. 在 video 组件非全屏情况下实现自定义组件，并正常显示（推荐使用绝对定位实现自定义组件布局）。
2. 将 video 组件通过 div 标签包裹，并给enablevideofullscreencontainer赋值true。

详情请参见 div 组件中的enablevideofullscreencontainer属性解释。

示例代码

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>
    <div class="item-container">
      <text class="item-title">Play MP4 format</text>
      <stack id="stackDemo01" class="s1">
        <video id="video" style="width:{{twidth}};height:{{theight}}" poster="https://www.quickapp.cn/assets/images/home/video.png" orientation="portrait" onprepared="prepared" onstart="start" onpause="pause" onfinish="finish" onerror="error" onseeking="eventSeeking" onseeked="eventSeeked" ontimeupdate="eventTimeupdate" src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4" @fullscreenchange="onFullscreenchange" controls="{{showControls}}" muted="{{muted}}" titlebar="{{titlebar}}" title="Quick APP Introduction video"></video>
        <div class="d1">
          <text style="color:#7fffd4;flex:1">stack Add overlay</text>
          <input type="button" class="btn" value="exit full screen" onclick="exitFullScreen" />
        </div>
      </stack>
    </div>

    <div class="item-container">
      <input type="button" class="btn" value="play" onclick="btnstart" />
    </div>
    <div class="item-container">
      <input type="button" class="btn" value="pause" onclick="btnpause" />
    </div>
    <div class="item-container">
      <input type="button" class="btn" value="seek" onclick="btnSeek" />
    </div>
    <div class="item-container">
      <input type="button" class="btn" value="full landscape" onclick="btnEnterFullLandscape" />
    </div>
    <div class="item-container">
      <input type="button" class="btn" value="full portrait" onclick="btnEnterFullPortrait" />
    </div>
    <div class="item-container">
      <input type="button" class="btn" value="show or hide contorls" onclick="switchShowControls" />
    </div>
    <div class="item-container">
      <input type="button" class="btn" value="show or hide title" onclick="switchShowtitle" />
    </div>
    <div class="item-container">
      <input type="button" class="btn" value="stack full screen" onclick="requestStackFullscreen" />
    </div>
  </div>
</template>

<style>
  .container {
    flex: 1;
    flex-direction: column;
  }

  .page-title-wrap {
    padding-top: 50px;
    padding-bottom: 80px;
    justify-content: center;
  }
  .page-title {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 40px;
    padding-right: 40px;
    border-color: #bbbbbb;
    color: #bbbbbb;
    border-bottom-width: 2px;
  }
  .item-container {
    margin-bottom: 50px;
    margin-right: 60px;
    margin-left: 60px;
    flex-direction: column;
  }

  .d1 {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .s1 {
    height: 350px;
  }

  .item-title {
    padding-left: 30px;
    padding-bottom: 20px;
  }

  .btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    margin-right: 60px;
    margin-left: 60px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
  }
</style>

<script>
  import prompt from '@system.prompt'

  export default {
    data: {
      componentName: 'video',
      showmask: true,
      showicon: true,
      ignorenet: false,
      showControls: true,
      muted: false,
      objectFitValues: [
        'cover', 'contain', 'fill', 'none', 'scale-down'
      ],
      objectFitClass: '',
      fullScreen: false,
      titlebar: true,
      twidth: '100%',
      theight: '100%'
    },
    onInit() {
      this.$page.setTitleBar({ text: 'video' })
    },
    prepared: function () {
      console.log("play")
      prompt.showToast({ message:"play"})
    },
    start: function () {
      console.log("play")
      prompt.showToast({ message: "play" })
    },
    pause: function () {
      console.log("pause")
      prompt.showToast({ message:"pause" })
    },
    finish: function () {
      console.log("finish play")
      prompt.showToast({ message: "finish play" })
    },
    error: function () {
      console.log("play error")
      prompt.showToast({ message:"play error"})
    },
    eventSeeking: function (e) {
      let msg = "event:" + 'Seeking to ' + e.currenttime
      console.log(msg)
      prompt.showToast({ message: msg })
    },
    eventSeeked: function (e) {
      let msg = "event:" + 'Seeked to ' + e.currenttime
      console.log(msg)
      prompt.showToast({ message: msg })
    },
    eventTimeupdate: function (e) {
      let msg = "event:"+ 'Timeupdate : ' + e.currenttime
      console.log(msg)
      if (e.currenttime === 10) {
        this.$element('video').requestFullscreen()
      } else if (e.currenttime === 20) {
        this.$element('video').exitFullscreen()
      }
    },
    eventFullscreenchange: function (e) {
      let msg = "event:" + 'Fullscreenchange : ' + e.fullscreen
      console.log(msg)
      prompt.showToast({ message: msg })
      this.fullScreen = true
    },
    btnstart: function () {
      this.$element('video').start()
      prompt.showToast({ message: "Click the play button to start playing" })
    },
    btnpause: function () {
      this.$element('video').pause()
      prompt.showToast({ message: "Click the pause button to pause playback" })
    },
    btnSeek: function () {
      this.$element('video').setCurrentTime({ currenttime: 60 })
      prompt.showToast({ message:  "seek 60" })
    },
    btnEnterFullLandscape: function () {
      this.$element('video').requestFullscreen({ screenOrientation: 'landscape' })
      prompt.showToast({ message: 'requestFullscreen landscape' })
    },
    btnEnterFullPortrait() {
      this.$element('video').requestFullscreen({ screenOrientation: 'portrait' })
      prompt.showToast({ message: 'requestFullscreen portrait' })
    },
    onFullscreenchange(data) {
      this.fullScreen = data.fullscreen
    },
    switchShowControls(e) {
      this.showControls = !this.showControls
    },
    onMutedSwitched(e) {
      this.muted = e.checked
    },
    onMulchSwitched(e) {
      this.$element('stackDemo01').requestFullscreen({ screenOrientation: 'landscape' })
    },
    changeOption(e) {
      this.objectFitClass = e.newValue
      prompt.showToast({ message: 'object-fit Successfully switched' })
    },
    switchShowtitle() {
      this.titlebar = !this.titlebar
    },
    requestStackFullscreen() {
      this.$element('stackDemo01').requestFullscreen({ 'screenOrientation': 'landscape' })
    },
    exitFullScreen() {
      this.$element('video').exitFullscreen()
      this.twidth = '100%'
      this.theight = '100%'
    }
  }
</script>

效果图如下：

1101以上版本内容相关示例代码：

<template>
  <div class="container">
    <video id="video" class="video" src="{{videoSrc}}" poster="{{videoPoster}}" title={{videoTitle}} showcastingbutton={{showCastingButton}}
    initialtime={{initialTime}} duration={{duration}} danmubtn={{danmuBtn}} enabledanmu={{enableDanmu}} danmulist={{danmuList}} picinpicmode="['pop']"
    picinpicshowprogress={{picInPicShowProgress}} onleavepictureinpicture="onLeavePictureInPicture" onenterpictureinpicture="onEnterPictureInPicture" showprogress={{showProgress}} 
    showfullscreenbtn={{showFullScreenButton}} showplaybtn={{showPlayBtn}} showcenterplaybtn={{showCenterPlayBtn}} enableprogressgesture={{enableProgressGesture}}
    autopauseifnavigate={{autoPauseIfNavigate}} autopauseifopennative={{autoPauseIfOpenNative}} showmutebtn={{showMuteButton}} playbtnposition={{playButtonPosition}}
    enableplaygesture={{enablePlayGesture}} vslidegesture={{vSlideGesture}} vslidegestureinfullscreen={{vSlideGestureInFullscreen}} enableautorotation={{enableAutoRotation}}
    showscreenlockbutton={{showScreenLockButton}} showsnapshotbutton={{showSnapshotButton}} showbgplaybackbutton={{showBgPlaybackButton}} isdrm={{isDrm}}
    licenseurl={{licenseUrl}} provisionurl={{provisionUrl}}></video>
  </div>
</template>

<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .video {
    width: 600px;
    height: 400px;
  }
</style>

<script>
  export default {
    data: {
      videoSrc: 'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4',
      videoPoster: 'https://www.quickapp.cn/assets/images/home/video.png',
      videoTitle: 'Sample Video',
      showCastingButton: true,
      initialTime: 10,
      duration: 20,
      direction: 90,
      danmuBtn: true,
      enableDanmu: true,
      danmuList: [{ text: 'Danmu test 6 second', color: '#0000ff', time: 6 }, { text: 'Danmu test 12 second', color: '#f0000f', time: 12 }, { text: 'Danmu test 18 second', color: '#0ffff0', time: 18 }],
      showProgress: true,
      showFullScreenButton: true,
      picInPicShowProgress: false,
      showPlayBtn: true,
      showCenterPlayBtn: true,
      enableProgressGesture: true,
      autoPauseIfNavigate: true,
      autoPauseIfOpenNative: true,
      showMuteButton: true,
      playButtonPosition: "bottom",
      enablePlayGesture: true,
      vSlideGesture: true,
      vSlideGestureInFullscreen: true,
      enableAutoRotation: true,
      showScreenLockButton: true,
      showSnapshotButton: true,
      showBgPlaybackButton: true,
      isDrm: false,
      licenseUrl: "",
      provisionUrl: ""
    },
    onEnterPictureInPicture() {
      console.log("onenterpictureinpicture called.")
    },
    onLeavePictureInPicture() {
      console.log("onleavepictureinpicture called.")
    }
  }
</script>

1109以上版本内容相关示例代码：

<template> 
<!-- Only one root node is allowed in template. --> 
  <div class="container"> 
    <div enablevideofullscreencontainer="true"class="mt-item mlr-container"> 
     <video title="Video component"titlebar="{{showTitleBar}}"controls="{{showControls}}"src="{{videoUrl}}"onPause="pauseMethod"class="video"id="video" onwaiting="waiting" headers="{{headers}}" minbufferms="{{minbufferms}}"  maxbufferms="{{maxbufferms}}" onrenderedfirstframe="{{renderedfirstframe}}" watermark="{{watermarkUri}}" onerror="error" codec="{{codec}}"></video> 
    </div> 
      <list class="mlr-container btn-list"> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="startVideo">{{$t('message.component.video.play')}}</text> 
        </list-item> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="stopVideo">{{$t('message.component.video.pause')}}</text> 
        </list-item> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="fullscreen">{{$t('message.component.video.enterFullScreen')}}</text> 
        </list-item> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="switchControls">{{$t('message.component.video.switchControl')}}</text> 
        </list-item> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="switchTitleBar">{{$t('message.component.video.switchTitle')}}</text> 
        </list-item> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="setTime">{{$t('message.component.video.seek')}}</text> 
        </list-item> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="snapShot">{{$t('message.component.video.snapShot')}}</text> 
        </list-item> 
        <list-item type="btn"class="btn-item"> 
          <text class="btn-transparent"onclick="mediaCodecs">{{$t('message.component.video.mediaCodecs')}}</text> 
        </list-item> 
      </list> 
  </div> 
</template> 
<style lang="sass"> 
@import '../../../Common/css/common.scss'; 
@import '../../../Common/css/button.scss'; 
.btn-list{ 
  columns: 2; 
  .btn-item{ 
  height: 140px; 
  align-items: center; 
  justify-content: center; 
  } 
} 
</style> 
<script> 
import { huaweiAdVideo } from '../../../Common/js/static'; 
import media from '@system.media'; 
import share from '@system.share'; 
import prompt from '@system.prompt'; 
module.exports = { 
  public: { 
    videoUrl:huaweiAdVideo, 
    showControls:true, 
    showTitleBar:true,
    deocder:"OMX.hisi.video.decoder.avc",
    headers:"{Authorization: 'secret_key_x'}",
    watermarkUri:"/Common/logo.png",
    minbufferms:"50000",
    maxbufferms:"50000"
  }, 
  onInit:function () { 
    this.$page.setTitleBar({ text:this.$t('message.component.video.barTitle') }); 
  }, 
  startVideo(){ 
    this.$element('video').start(); 
  }, 
  stopVideo(){ 
    this.$element('video').pause(); 
  }, 
  pauseMethod(event){ 
    console.log('pauseCode: '+event.pauseCode) 
  }, 
  fullscreen(){ 
    this.$element('video').requestFullscreen(); 
  }, 
  exitFullscreen(){ 
    this.$element('video').exitFullscreen(); 
  }, 
  switchControls(){ 
    this.showControls = !this.showControls; 
  }, 
  switchTitleBar(){ 
    this.showTitleBar = !this.showTitleBar; 
  }, 
  setTime(){ 
    this.$element('video').setCurrentTime({currenttime:60}); 
  }, 
  renderedfirstframe: function () {
    console.log("renderedfirstframe")
    prompt.showToast({ message:"renderedfirstframe })
  },
  waiting (data) {
    if(data.status === null || data.status === undefined){
      prompt.showToast({ message: 'Freezing info: start' })
    }else  if(data.status === "end"){
      prompt.showToast({ message: 'Freezing info: end' })
    }
  },
  error: function(event){
    let msg = "Error Type: " + event.errorType + " " +  "Error Code: " + event.errorCode + " " + "Error Message: " + event.errorMsg    
    prompt.showToast({message.msg})
  },
  mediaCodecs(){
    this.$element('video').getSupportedVideoCodes({
      callback: function (data) {
        prompt.showToast({
          message: data.supportedMediaCodecs,
          duration: 2000,
          gravity: 'bottom'
        });
      },
    });
  },
  snapShot() { 
  // 获取video组件并调用snapshot方法进行截屏 
    this.$element('video').snapshot({ 
      success: (data) => { 
        console.log(`图片路径：${data.uri}, 图片名称：${data.name}, 图片大小：${data.size}`) 
        const imagePath = data.uri 
        if (imagePath && imagePath.length > 0) { 
          share.share({ 
            type:"image/jpeg", 
              data:data.uri, 
                success:function (data) { 
                  prompt.showToast({ 
                    message:'success', 
                    duration:2000, 
                    gravity:'bottom' 
                  }) 
                }, 
                fail:function () { 
                  prompt.showToast({ 
                    message:'fail', 
                    duration:2000, 
                    gravity:'bottom' 
                  }) 
                } 
          }) 
        } 
      }, 
      fail: (errorMsg, errorCode) => { 
        console.log(`fail message: ${errorMsg}`) 
        console.log(`fail code: ${errorCode}`) 
      } 
    }) 
  } 
} 
</script>

版本更新说明

相关链接

案例

• 左右滑动误拖动video实现的视频进度条
• 滑动浏览视频时，控制只有完整显示的视频才能自动播放