video.js 5.2 KB

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