video

视频播放器

示例

  1. <template>
  2.   <view class="container">
  3.     <view class="text-wrap">
  4.       <text>视频state: </text>
  5.       <text class="info">{{state}}</text>
  6.     </view>
  7.     <video
  8.       src="{{videoSrc}}"
  9.       autoplay="{{true}}"
  10.       controls="{{true}}"
  11.       c-bind:start="onstart"
  12.       c-bind:pause="onpause"
  13.       c-bind:finish="onfinish"
  14.       c-bind:fail="onfail"
  15.     >
  16.     </video>
  17.   </view>
  18. </template>
  19. <script>
  20. import cml from 'chameleon-api'
  21. class Video  {
  22.   data = {
  23.     videoSrc: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
  24.     state: '----',
  25.   }
  26.   methods = {
  27.     onstart (event) {
  28.       this.state = 'onstart'
  29.       cml.showToast({
  30.         message: this.state
  31.       })
  32.     },
  33.     onpause (event) {
  34.       this.state = 'onpause'
  35.       cml.showToast({
  36.         message: this.state
  37.       })
  38.     },
  39.     onfinish (event) {
  40.       this.state = 'onfinish'
  41.       cml.showToast({
  42.         message: this.state
  43.       })
  44.     },
  45.     onfail (event) {
  46.       this.state = 'onfail'
  47.       cml.showToast({
  48.         message: this.state
  49.       })
  50.     }
  51.   }
  52. }
  53. export default new Video();
  54. </script>
  55. <style scoped>
  56. .container {
  57.   display: flex;
  58.   flex-direction: column;
  59.   align-items: center;
  60. }
  61. .text-wrap {
  62.   flex-direction: row;
  63.   margin-bottom: 20cpx;
  64. }
  65. .info {
  66.   font-size: 40cpx;
  67.   text-align: center;
  68.   color: #fc9153;
  69. }
  70. </style>
  72. <script cml-type="json">
  73. {
  74.   "base": {}
  75. }
  76. </script>