<video>

Video 组件用于在页面中嵌入视频内容。

子组件

text 是唯一合法的子组件。

属性

  • src, string： 内嵌的视频指向的URL。（iOS的web环境下，视频服务必须支持分段请求才能正常播放，因为web环境基于浏览器内核，而浏览器内核不支持整个文件流）
  • playStatus, string：可选值为 play | pause，用来控制视频的播放状态，play 或者 pause，默认值是 pause。
  • autoPlay, boolean： 当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 false。如:autoPlay="true"。（web环境需要和muted属性同时使用才可自动播放）
  • poster, string： 指定视频首图的图片链接（web环境不支持）。
  • controls, string： 可选值为 controls | nocontrols，控制视频播放组件是否显示回放控制面板，默认会显示，当指定为 nocontrols 时不显示回放控制面板。
  • playsinline, boolean： 标志视频将被“inline”播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。（仅在web环境运行时生效；iOS在10以上版本有效）

样式

事件

  • start 当 playback 的状态是 Playing 时触发。
  • pause 当 playback 的状态是 Paused 时触发。
  • finish 当 playback 的状态是 Finished 时触发。
  • fail 当 playback 状态是 Failed 时触发。

示例

<template>
  <div>
<<<<<<< HEAD
<<<<<<< HEAD
    <video class="video" :src="src" autoPlay="true" controls
=======
    <video class="video" :src="src" autoPlay controls
>>>>>>> 060bb81d253bb7a7dd7585bc6949ede43eef6ada
=======
    <video class="video" :src="src" :autoPlay="true" controls
>>>>>>> 2a6e54fecd620b994702a9b2cd3e3af6daf725b1
      @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
    <text class="info">state: {{state}}</text>
  </div>
</template>

<style scoped>
  .video {
    width: 630px;
    height: 350px;
    margin-top: 60px;
    margin-left: 60px;
  }
  .info {
    margin-top: 40px;
    font-size: 40px;
    text-align: center;
  }
</style>

<script>
  export default {
    data () {
      return {
        state: '----',
        src:'https://www.runoob.com/try/demo_source/movie.mp4'
      }
    },
    methods:{
      onstart (event) {
        this.state = 'onstart'
      },
      onpause (event) {
        this.state = 'onpause'
      },
      onfinish (event) {
        this.state = 'onfinish'
      },
      onfail (event) {
        this.state = 'onfinish'
      }
    }
  }
</script>