简介

WARNING

Weex中内置的<video>组件一般只做demo用途,在你的App中,你应该用你喜欢的视频库重新实现video组件。

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

子组件

text 是唯一合法的子组件。

属性

  • src, string. 内嵌的视频指向的URL。
  • play-status, string. 可选值为 play | pause,用来控制视频的播放状态,play 或者 pause,默认值是 pause
  • auto-play, boolean. 当页面加载初始化完成后,用来控制视频是否立即播放,默认值是 false
  • poster, string, v0.18+ & iOS. 指定视频首图的图片链接。
  • controls, string, v0.19+. 可选值为 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>
  8. <style scoped>
  9. .video {
  10. width: 630px;
  11. height: 350px;
  12. margin-top: 60px;
  13. margin-left: 60px;
  14. }
  15. .info {
  16. margin-top: 40px;
  17. font-size: 40px;
  18. text-align: center;
  19. }
  20. </style>
  21. <script>
  22. export default {
  23. data () {
  24. return {
  25. state: '----',
  26. src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
  27. }
  28. },
  29. methods:{
  30. onstart (event) {
  31. this.state = 'onstart'
  32. },
  33. onpause (event) {
  34. this.state = 'onpause'
  35. },
  36. onfinish (event) {
  37. this.state = 'onfinish'
  38. },
  39. onfail (event) {
  40. this.state = 'onfinish'
  41. }
  42. }
  43. }
  44. </script>