video.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <!--pages/video/video.wxml-->
  3. <video id="myVideo" :src="path" autoplay="true" @fullscreenchange="fullScreen" @ended="videoEnd" controls></video>
  4. </template>
  5. <script>
  6. // pages/video/video.js
  7. const app = getApp();
  8. const req = require("../../utils/request.js");
  9. export default {
  10. data() {
  11. return {
  12. videoList: [],
  13. index: 0,
  14. path: ''
  15. };
  16. },
  17. components: {},
  18. props: {},
  19. onLoad(options) {
  20. this.videoList = JSON.parse(options.videoList);
  21. this.setData({
  22. path: this.videoList[0].media_url
  23. });
  24. },
  25. onShow: function () {
  26. this.videoContext = uni.createVideoContext('myVideo', this);
  27. this.videoContext.requestFullScreen({
  28. direction: 0
  29. });
  30. },
  31. methods: {
  32. videoEnd() {
  33. // 视频播放结束后执行的方法
  34. var that = this;
  35. if (that.index == that.videoList.length - 1) {
  36. uni.showToast({
  37. title: '已播放完成',
  38. icon: 'loading',
  39. duration: 2500,
  40. mask: true
  41. });
  42. that.setData({
  43. index: 1
  44. });
  45. this.videoContext.pause(); //暂停
  46. } else {
  47. req.msg('播放下一个视频', that.videoPlay());
  48. }
  49. },
  50. videoPlay() {
  51. that = this;
  52. var videoList = that.videoList.length;
  53. that.setData({
  54. index: that.index + 1,
  55. path: that.videoList[that.index + 1].media_url
  56. });
  57. // console.log(this.path);
  58. this.videoContext.autoplay == 'true'; //设置自动播放
  59. this.videoContext.play(); //播放视频
  60. }
  61. }
  62. };
  63. </script>
  64. <style>
  65. @import "./video.css";
  66. </style>