video.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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. this.selectComponent('#comment').open(target.dataset.id)
  91. },
  92. // 分享
  93. creatShare(video) {
  94. return new Promise((resolve, reject) => {
  95. let context = wx.createSelectorQuery();
  96. context
  97. .select('#share')
  98. .fields({
  99. node: true,
  100. size: true
  101. }).exec((res) => {
  102. const canvas = res[0].node;
  103. const ctx = canvas.getContext('2d');
  104. const dpr = wx.getSystemInfoSync().pixelRatio;
  105. canvas.width = res[0].width * dpr;
  106. canvas.height = res[0].height * dpr;
  107. ctx.scale(dpr, dpr);
  108. ctx.font = '14px PingFang';
  109. let pic = canvas.createImage();
  110. pic.src = video.userRead.coverImg; //可以是本地,也可以是网络图片
  111. pic.onload = () => {
  112. ctx.drawImage(pic, 0, 0, 375, 211);
  113. }
  114. let peiyin = canvas.createImage();
  115. peiyin.src = '/static/peiyin.jpg';
  116. peiyin.onload = () => {
  117. ctx.drawImage(peiyin, 0, 211, 375, 89);
  118. // 收藏,一个一个渲染
  119. let sc = canvas.createImage();
  120. sc.src = '/static/no_collect.png'
  121. sc.onload = () => {
  122. ctx.drawImage(sc, 12, 220, 20, 20)
  123. ctx.fillText('收藏', 36, 238)
  124. //分享
  125. let fx = canvas.createImage();
  126. fx.src = '/static/share.png'
  127. fx.onload = () => {
  128. ctx.drawImage(fx, 78, 220, 22, 22)
  129. ctx.fillText('分享', 104, 238)
  130. //点赞
  131. let dz = canvas.createImage();
  132. dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
  133. dz.onload = () => {
  134. ctx.drawImage(dz, 258, 222, 22, 22)
  135. ctx.fillText(video.likes, 284, 238)
  136. //评论
  137. let pl = canvas.createImage();
  138. pl.src = '/static/comment.png'
  139. pl.onload = () => {
  140. ctx.drawImage(pl, 318, 222, 22, 22)
  141. ctx.fillText(video.commentAmount, 340, 238)
  142. setTimeout(() => {
  143. wx.canvasToTempFilePath({
  144. canvas: canvas,
  145. success(res) {
  146. resolve({
  147. title: '我的新作品发布啦,快来捧场点赞!',
  148. path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
  149. imageUrl: res.tempFilePath
  150. })
  151. },
  152. fail(res) {
  153. reject()
  154. }
  155. }, this)
  156. }, 500)
  157. }
  158. }
  159. }
  160. }
  161. }
  162. })
  163. })
  164. },
  165. }
  166. })