video.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. let innerAudioContext
  2. import {
  3. setDuration
  4. } from '~/utils/util'
  5. module.exports = Behavior({
  6. data: {
  7. currentId: '',
  8. sliderValue: 0,
  9. currentTime: '00:00'
  10. },
  11. properties: {},
  12. pageLifetimes: {
  13. hide() {
  14. this.resetAudio()
  15. },
  16. },
  17. lifetimes: {
  18. attached() {
  19. this.innerAudioContext = wx.createInnerAudioContext()
  20. this.innerAudioContext.onTimeUpdate(res => {
  21. this.setData({
  22. sliderValue: Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100),
  23. currentTime: setDuration(this.innerAudioContext.currentTime)
  24. })
  25. })
  26. this.innerAudioContext.onError(res => {
  27. console.log(res, 'rrrrrrrrrrrr');
  28. })
  29. this.innerAudioContext.onEnded(res => {
  30. this.resetAudio()
  31. })
  32. }
  33. },
  34. methods: {
  35. // 开始播放
  36. playVideo({
  37. currentTarget
  38. }) {
  39. this.setData({
  40. currentId: currentTarget.dataset.id
  41. })
  42. },
  43. // 播放音频
  44. playAudio({
  45. currentTarget
  46. }) {
  47. if (this.data.currentId == currentTarget.dataset.id) {
  48. return this.resetAudio()
  49. }
  50. if (this.innerAudioContext) {
  51. this.resetAudio()
  52. }
  53. this.setData({
  54. currentId: currentTarget.dataset.id,
  55. currentTime: '00:00',
  56. sliderValue: 0
  57. })
  58. this.innerAudioContext.src = currentTarget.dataset.audio
  59. setTimeout(() => {
  60. this.innerAudioContext.play();
  61. }, 200)
  62. },
  63. // 设置音频播放进度
  64. setSeek({
  65. detail
  66. }) {
  67. this.innerAudioContext.pause();
  68. this.innerAudioContext.seek(detail)
  69. setTimeout(() => {
  70. this.innerAudioContext.play()
  71. }, 300)
  72. },
  73. // 重置音频
  74. resetAudio() {
  75. if (this.innerAudioContext) {
  76. this.innerAudioContext.stop();
  77. }
  78. this.setData({
  79. currentId: '',
  80. sliderValue: 0
  81. })
  82. },
  83. // 打开评论
  84. openComment({
  85. target
  86. }) {
  87. this.selectComponent('#comment').open(target.dataset.id)
  88. },
  89. // 分享
  90. creatShare(video) {
  91. return new Promise((resolve, reject) => {
  92. let context = wx.createSelectorQuery();
  93. context
  94. .select('#share')
  95. .fields({
  96. node: true,
  97. size: true
  98. }).exec((res) => {
  99. const canvas = res[0].node;
  100. const ctx = canvas.getContext('2d');
  101. const dpr = wx.getSystemInfoSync().pixelRatio;
  102. canvas.width = res[0].width * dpr;
  103. canvas.height = res[0].height * dpr;
  104. ctx.scale(dpr, dpr);
  105. ctx.font = '14px PingFang';
  106. let pic = canvas.createImage();
  107. pic.src = video.userRead.coverImg; //可以是本地,也可以是网络图片
  108. pic.onload = () => {
  109. ctx.drawImage(pic, 0, 0, 375, 211);
  110. }
  111. let peiyin = canvas.createImage();
  112. peiyin.src = '/static/peiyin.jpg';
  113. peiyin.onload = () => {
  114. ctx.drawImage(peiyin, 0, 211, 375, 89);
  115. // 收藏,一个一个渲染
  116. let sc = canvas.createImage();
  117. sc.src = '/static/no_collect.png'
  118. sc.onload = () => {
  119. ctx.drawImage(sc, 12, 220, 20, 20)
  120. ctx.fillText('收藏', 36, 238)
  121. //分享
  122. let fx = canvas.createImage();
  123. fx.src = '/static/share.png'
  124. fx.onload = () => {
  125. ctx.drawImage(fx, 78, 220, 22, 22)
  126. ctx.fillText('分享', 104, 238)
  127. //点赞
  128. let dz = canvas.createImage();
  129. dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
  130. dz.onload = () => {
  131. ctx.drawImage(dz, 258, 222, 22, 22)
  132. ctx.fillText(video.likes, 284, 238)
  133. //评论
  134. let pl = canvas.createImage();
  135. pl.src = '/static/comment.png'
  136. pl.onload = () => {
  137. ctx.drawImage(pl, 318, 222, 22, 22)
  138. ctx.fillText(video.commentAmount, 340, 238)
  139. setTimeout(() => {
  140. wx.canvasToTempFilePath({
  141. canvas: canvas,
  142. success(res) {
  143. resolve({
  144. title: '我的新作品发布啦,快来捧场点赞!',
  145. path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
  146. imageUrl: res.tempFilePath
  147. })
  148. },
  149. fail(res) {
  150. reject()
  151. }
  152. }, this)
  153. }, 500)
  154. }
  155. }
  156. }
  157. }
  158. }
  159. })
  160. })
  161. },
  162. }
  163. })