video.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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. this.resetAudio()
  49. if (!currentTarget.dataset.isPkPage) {
  50. return
  51. }
  52. }
  53. if (this.innerAudioContext) {
  54. this.resetAudio()
  55. }
  56. this.setData({
  57. currentId: currentTarget.dataset.id,
  58. currentTime: '00:00',
  59. sliderValue: 0
  60. })
  61. this.innerAudioContext.src = currentTarget.dataset.audio
  62. setTimeout(() => {
  63. this.innerAudioContext.play();
  64. }, 200)
  65. },
  66. // 设置音频播放进度
  67. setSeek({
  68. detail
  69. }) {
  70. this.innerAudioContext.pause();
  71. this.innerAudioContext.seek(detail)
  72. setTimeout(() => {
  73. this.innerAudioContext.play()
  74. }, 300)
  75. },
  76. // 重置音频
  77. resetAudio() {
  78. if (this.innerAudioContext) {
  79. this.innerAudioContext.stop();
  80. }
  81. this.setData({
  82. currentId: '',
  83. sliderValue: 0
  84. })
  85. },
  86. // 打开评论
  87. openComment({
  88. target
  89. }) {
  90. console.log(target);
  91. this.selectComponent('#comment').open(target.dataset.id, target.dataset.type, target.dataset.onceId)
  92. },
  93. // 分享
  94. creatShare(video) {
  95. return new Promise((resolve, reject) => {
  96. let context = wx.createSelectorQuery();
  97. context
  98. .select('#share')
  99. .fields({
  100. node: true,
  101. size: true
  102. }).exec((res) => {
  103. const canvas = res[0].node;
  104. const ctx = canvas.getContext('2d');
  105. const dpr = wx.getSystemInfoSync().pixelRatio;
  106. canvas.width = res[0].width * dpr;
  107. canvas.height = res[0].height * dpr;
  108. ctx.scale(dpr, dpr);
  109. ctx.font = '14px PingFang';
  110. let pic = canvas.createImage();
  111. pic.src = video.userRead.coverImg; //可以是本地,也可以是网络图片
  112. pic.onload = () => {
  113. ctx.drawImage(pic, 0, 0, 375, 211);
  114. }
  115. let peiyin = canvas.createImage();
  116. peiyin.src = '/static/peiyin.jpg';
  117. peiyin.onload = () => {
  118. ctx.drawImage(peiyin, 0, 211, 375, 89);
  119. // 收藏,一个一个渲染
  120. let sc = canvas.createImage();
  121. sc.src = '/static/no_collect.png'
  122. sc.onload = () => {
  123. ctx.drawImage(sc, 12, 220, 20, 20)
  124. ctx.fillText('收藏', 36, 238)
  125. //分享
  126. let fx = canvas.createImage();
  127. fx.src = '/static/share.png'
  128. fx.onload = () => {
  129. ctx.drawImage(fx, 78, 220, 22, 22)
  130. ctx.fillText('分享', 104, 238)
  131. //点赞
  132. let dz = canvas.createImage();
  133. dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
  134. dz.onload = () => {
  135. ctx.drawImage(dz, 258, 222, 22, 22)
  136. ctx.fillText(video.likes, 284, 238)
  137. //评论
  138. let pl = canvas.createImage();
  139. pl.src = '/static/comment.png'
  140. pl.onload = () => {
  141. ctx.drawImage(pl, 318, 222, 22, 22)
  142. ctx.fillText(video.commentAmount, 340, 238)
  143. setTimeout(() => {
  144. wx.canvasToTempFilePath({
  145. canvas: canvas,
  146. success(res) {
  147. resolve({
  148. title: '我的新作品发布啦,快来捧场点赞!',
  149. path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
  150. imageUrl: res.tempFilePath
  151. })
  152. },
  153. fail(res) {
  154. reject()
  155. }
  156. }, this)
  157. }, 500)
  158. }
  159. }
  160. }
  161. }
  162. }
  163. })
  164. })
  165. },
  166. }
  167. })