<video>

简介

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

子组件

text 是唯一合法的子组件。

属性

  • src, string. 内嵌的视频指向的URL。
  • play-status, string. 可选值为 play | pause，用来控制视频的播放状态，play 或者 pause，默认值是 pause。
  • auto-play, boolean. 当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 false。
  • poster, string, . 指定视频首图的图片链接。
  • controls, string, . 可选值为 controls | nocontrols，控制视频播放组件是否显示回放控制面板，默认会显示，当指定为 nocontrols 时不显示回放控制面板。

样式

事件

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

示例

  1. <template>
  2.   <div>
  3.     <video class="video" :src="src" autoplay controls
  4.       @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
  5.     <text class="info">state: {{state}}</text>
  6.   </div>
  7. </template>
  9. <style scoped>
  10.   .video {
  11.     width: 630px;
  12.     height: 350px;
  13.     margin-top: 60px;
  14.     margin-left: 60px;
  15.   }
  16.   .info {
  17.     margin-top: 40px;
  18.     font-size: 40px;
  19.     text-align: center;
  20.   }
  21. </style>
  23. <script>
  24.   export default {
  25.     data () {
  26.       return {
  27.         state: '----',
  28.         src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
  29.       }
  30.     },
  31.     methods:{
  32.       onstart (event) {
  33.         this.state = 'onstart'
  34.       },
  35.       onpause (event) {
  36.         this.state = 'onpause'
  37.       },
  38.       onfinish (event) {
  39.         this.state = 'onfinish'
  40.       },
  41.       onfail (event) {
  42.         this.state = 'onfinish'
  43.       }
  44.     }
  45.   }
  46. </script>