微信小程序使用video

微信小程序播放视频，它有原生的视频video，所以就可以直接使用了，但是注意一点，这个视频不要放到本地，小程序分包有大小限制，基本上一个视频就超出了限制，所以小程序就无法打包。我的解决办法有两个。反正最终就是不要放在项目里面就行。

第一个是在网上找一个视频，复制他的地址，如下图，找到video，然后复制他的src地址。

第二个是使用wxCloud里面 放到云开发里面

如何使用如下，实现一个播放视频的功能。

<video id='myvd' src="{{videosrc}}"/>
  data: {
    videosrc: '<https://vdept3.bdstatic.com/mda-qbqjmyt274wmvp3d/cae_h264/1708869342902729628/mda-qbqjmyt274wmvp3d.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1742645996-0-0-55aee4a169cacf3dbacbdedf082d51ef&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=1196527677&vid=12037732964042638437&klogid=1196527677&abtest=>',
  },

怎么实现下次进入，还记得上次播放记录呢？

思路如下：可以把播放的记录存在本地存储里面，加载页面onload生命周期去读取上次的记录，那什么时机存储播放记录呢？怎么存储呢？我们可以通过video的一个事件bindtimeupdate（播放进度变化时触发，250ms触发一次）。代码如下所示

<video id='myvd' src="{{videosrc}}" bindtimeupdate="onTimeUpdate"/>
<van-dialog id="van-dialog2" show='{{showdialoghistory}}' />
  data: {
    videosrc: '<https://vdept3.bdstatic.com/mda-qbqjmyt274wmvp3d/cae_h264/1708869342902729628/mda-qbqjmyt274wmvp3d.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1742645996-0-0-55aee4a169cacf3dbacbdedf082d51ef&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=1196527677&vid=12037732964042638437&klogid=1196527677&abtest=>',
    showdialoghistory: false
  },
  // 获取播放进度
  onTimeUpdate(e) {
    const videoconte = wx.createVideoContext('myvd')
    const currenttime = e.detail.currentTime
    wx.setStorageSync('videoProgress', currenttime);   
  },
  // 播放历史
  onLoad(options) {
    const savedTime = wx.getStorageSync('videoProgress') || 0;
    if (savedTime != 0) {
      Dialog.confirm({
          title: '历史播放记录',
          message: '是否恢复上次记录',
        })
        .then(() => {
          const videoContext = wx.createVideoContext('myvd');
          videoContext.seek(savedTime); //定位到上次播放的地方
          videoContext.play(); //开始播放
        })
        .catch(() => {
          // on cancel
        })
        .finally(() => {
          this.setData({
            showdialoghistory: false
          })

        });
    }
  },

怎么实现视频只可以播放20秒，继续播放会提示付费呢？

思路：我们可以通过设置弹窗提示，当他的时间超过20秒，弹窗就会提示，点击确认，视频暂停。这里弹窗和视频暂停两个事件要有一个先后，通过设置定时器，让视频暂停500ms后，弹窗出现。

<video id='myvd' src="{{videosrc}}" bindtimeupdate="onTimeUpdate"/>
<van-dialog id="van-dialog" show='{{showdialog}}' />
<van-dialog id="van-dialog2" show='{{showdialoghistory}}' />
  data: {
    videosrc: '<https://vdept3.bdstatic.com/mda-qbqjmyt274wmvp3d/cae_h264/1708869342902729628/mda-qbqjmyt274wmvp3d.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1742645996-0-0-55aee4a169cacf3dbacbdedf082d51ef&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=1196527677&vid=12037732964042638437&klogid=1196527677&abtest=>',
    showdialog: false,
    showdialoghistory: false
  },
  // 付费观看
  onTimeUpdate(e) {
    const videoconte = wx.createVideoContext('myvd')
    const currenttime = e.detail.currentTime
    wx.setStorageSync('videoProgress', currenttime);
    if (currenttime >= 20) {
      videoconte.pause()
      setTimeout(() => {
        Dialog.confirm({
            title: '付费提示',
            message: '付费观看剩余部分',
          })
          .then(() => {

          })
          .catch(() => {
            // on cancel
          })
          .finally(() => {
            this.setData({
              showdialog: false
            })

          });
      }, 500);

    }
  },
  // 播放历史
  onLoad(options) {
    const savedTime = wx.getStorageSync('videoProgress') || 0;
    if (savedTime != 0) {
      Dialog.confirm({
          title: '历史播放记录',
          message: '是否恢复上次记录',
        })
        .then(() => {
          const videoContext = wx.createVideoContext('myvd');
          videoContext.seek(savedTime);
          videoContext.play();
        })
        .catch(() => {
          // on cancel
        })
        .finally(() => {
          this.setData({
            showdialoghistory: false
          })

        });
    }
  },

如果想要知道更多关于video的用法， 可以移步到官方文档

video | 微信开放文档