index.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. import {
  2. getreadInfo
  3. } from '~/api/video'
  4. let rowHeight = 0
  5. let videoContext = null
  6. Page({
  7. data: {
  8. videoInfo: {},
  9. currentRow: null,
  10. state: false,
  11. countDown: {
  12. state: false,
  13. num: 3,
  14. },
  15. scrollTop: 0,
  16. article: [{
  17. id: 1,
  18. text: '传说在很久很久以前,',
  19. time: '0'
  20. }, {
  21. id: 2,
  22. text: '天和地还没有分开,',
  23. time: '4010'
  24. }, {
  25. id: 3,
  26. text: '整个宇宙混沌一团,',
  27. time: '7080'
  28. }, {
  29. id: 4,
  30. text: '像个大鸡蛋。',
  31. time: '10150'
  32. }, {
  33. id: 5,
  34. text: '有个叫盘古的大神,',
  35. time: '13150'
  36. }, {
  37. id: 6,
  38. text: '昏睡了一万八千年。',
  39. time: '16190'
  40. }, {
  41. id: 7,
  42. text: '一天,大神醒来,睁眼一看,',
  43. time: '20030'
  44. }, {
  45. id: 8,
  46. text: '周围黑乎乎一片,',
  47. time: '24210'
  48. }, {
  49. id: 9,
  50. text: '什么也看不见。',
  51. time: '27300'
  52. }, {
  53. id: 10,
  54. text: '他一使劲翻身坐了起来,',
  55. time: '29210'
  56. }, {
  57. id: 11,
  58. text: '只听“咔嚓”一声,',
  59. time: '32700'
  60. }, {
  61. id: 12,
  62. text: '“大鸡蛋”裂开了一条缝,',
  63. time: '35320'
  64. }, {
  65. id: 13,
  66. text: '一丝微光透了进来。',
  67. time: '38270'
  68. }, ]
  69. },
  70. onLoad(options) {
  71. let videoId = options.videoId
  72. this.getreadInfo(videoId)
  73. let data = this.data.article
  74. data = data.map((item, index) => {
  75. item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
  76. return item
  77. })
  78. this.setData({
  79. article: data
  80. })
  81. var query = wx.createSelectorQuery();
  82. query.select('.row').boundingClientRect((rect) => {
  83. this.rowHeight = rect.height
  84. console.log(rect);
  85. }).exec()
  86. this.videoContext = wx.createVideoContext('myVideo')
  87. },
  88. async getreadInfo(videoId) {
  89. let videoInfo = await getreadInfo(videoId)
  90. console.log(videoInfo);
  91. wx.setNavigationBarTitle({
  92. title: videoInfo.userRead.title
  93. })
  94. this.setData({
  95. videoInfo
  96. })
  97. },
  98. // 开始录制
  99. setCountDown() {
  100. if (this.data.state) {
  101. return
  102. }
  103. this.setData({
  104. 'countDown.state': true
  105. })
  106. setInterval(() => {
  107. if (this.data.countDown.num == 0) {
  108. clearInterval(this.stl)
  109. this.setData({
  110. state: true,
  111. countDown: {
  112. state: false,
  113. num: 3
  114. }
  115. })
  116. this.videoContext.play()
  117. this.startRecording()
  118. } else {
  119. this.setData({
  120. 'countDown.num': --this.data.countDown.num
  121. })
  122. }
  123. }, 1000)
  124. },
  125. startRecording() {
  126. if (this.data.currentRow == null) {
  127. this.setData({
  128. currentRow: 0
  129. })
  130. }
  131. let row = this.data.article[this.data.currentRow]
  132. if (!row.readTime) {
  133. return
  134. }
  135. let setTimeoutObj = setTimeout(() => {
  136. this.setData({
  137. currentRow: ++this.data.currentRow
  138. })
  139. this.setData({
  140. scrollTop: this.rowHeight * this.data.currentRow
  141. })
  142. this.startRecording()
  143. },
  144. row.readTime);
  145. },
  146. // 视频播放结束
  147. videoEnd() {
  148. this.setData({
  149. currentRow: null,
  150. state: false,
  151. scrollTop: 0,
  152. })
  153. },
  154. /**
  155. * 生命周期函数--监听页面卸载
  156. */
  157. onUnload() {
  158. },
  159. onShareAppMessage() {
  160. }
  161. })