video


视频播放器

属性

属性名类型必填默认值说明
srcString要播放视频的资源地址
autoplayBooleanfalse是否自动播放
controlsBooleanfalse是否显示默认播放控件(播放/暂停按钮、播放进度、时间)(只对wx有效)
c-bind:startEventHandle当开始/继续播放时触发start事件
c-bind:pauseEventHandle当暂停播放时触发 pause 事件
c-bind:finishEventHandle当播放到末尾时触发 finish 事件
c-bind:failEventHandle视频播放出错时触发 fail

示例

  1. <template>
  2. <view class="container">
  3. <video
  4. class="video"
  5. src="{{videoSrc}}"
  6. autoplay="{{true}}"
  7. controls="{{true}}"
  8. c-bind:start="onstart"
  9. c-bind:pause="onpause"
  10. c-bind:finish="onfinish"
  11. c-bind:fail="onfail"
  12. >
  13. </video>
  14. </view>
  15. </template>
  16. <script>
  17. import cml from 'chameleon-api'
  18. class Video {
  19. data = {
  20. videoSrc: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  21. state: '----',
  22. }
  23. }
  24. export default new Video();
  25. </script>
  26. <style scoped>
  27. .video {
  28. width: 720cpx;
  29. height: 350cpx;
  30. margin-top: 60cpx;
  31. }
  32. </style>
  33. <script cml-type="json">
  34. {
  35. "base": {}
  36. }
  37. </script>

video  - 图1wx

video  - 图2web

video  - 图3native

Bug & Tip