小程序怎么实现视频播放

小程序怎么实现视频播放

1.微信小程序原生视频组件

微信小程序提供了原生视频组件<video>，只需要在wxml文件中添加<video>标签即可实现视频播放。

<video src="{{videoSrc}}" poster="{{videoCover}}" initial-time="0" id="myVideo" enable-danmu danmu-btn controls autoplay></video>

其中，<video>标签的属性有：

src：视频资源地址

poster：视频封面

initial-time：视频初始播放位置

id：视频的唯一标识符，方便js处理

enable-danmu：是否开启弹幕功能

danmu-btn：是否显示弹幕按钮

controls：是否显示默认控制器

autoplay：是否自动播放

需要注意的是，视频播放需要用户主动触发，比如点击一个按钮，然后触发js中的控制代码，才可以实现视频的播放和暂停等操作。

2.小程序视频插件

除了微信小程序提供的原生视频组件，还有很多视频插件可以供开发者使用。

以v-video插件为例，首先需要在project.config.json文件中开启小程序npm支持，然后使用npm进行安装。

{

  "miniprogramRoot": "miniprogram",
  "cloudfunctionRoot": "cloudfunctions/",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "enhance": false,
    "postcss": false,
    "preloadBackgroundData": false,
    "minified": false,
    "newFeature": false,
    "coverView": true,
    "nodeModules": true,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "babel": false,
    "useMultiFrameRuntime": false,
    "useApiForThirdParty": true,
    "enableTypescript": false
  },
  "packOptions": {
    "ignore": []
  },
  "sitemapLocation": "sitemap.json",
  "npm": {
    "name": "miniprogram-video",
    "scope": false,
    "path": ""
  }
}

然后在需要使用插件的页面json文件中声明引用即可。

{

  "usingComponents": {
    "v-video": "miniprogram-video"
  }
}

最后在wxml文件中添加<v-video>标签即可实现视频播放，并且可以根据插件提供的配置选项自定义视频的显示样式。

<v-video src="{{videoSrc}}" initsize="{{initsize}}" controls="{{controls}}" live="{{live}}" danmu-list="{{danmuList}}" show-captions="{{showCaptions}}" autoplay="{{autoplay}}" muted="{{muted}}" loop="{{loop}}" object-fit="{{objectFit}}" background-mute="{{backgroundMute}}" picture-in-picture="{{pictureInPicture}}" show-center-play-btn="{{showCenterPlayBtn}}" show-play-btn="{{showPlayBtn}}" show-center-play-btn="{{showCenterPlayBtn}}" show-fullscreen-btn="{{showFullscreenBtn}}" show-mute-btn="{{showMuteBtn}}" show-play-btn="{{showPlayBtn}}" show-progress="{{showProgress}}" show-play-btn-loading="{{showPlayBtnLoading}}" show-bar="{{showBar}}" bindloadedmetadata="loadedmetadata" bindplay="play" bindpause="pause" bindended="ended" bindtimeupdate="timeupdate" binderror="error">

小程序视频播放注意事项

1.视频格式

微信小程序支持的视频格式有：3gp、mp4、mov、m4v、avi、wmv、flv、f4v、mkv、asf、webm、mpeg、mpg、dat、ts、mts、vob等。

2.视频源地址

视频源地址需要做跨域处理才能正常播放。

可以在app.js中配置接口域名和协议，用于后续所有http请求。

App({

  globalData: {
    apiHost: "http://localhost:8080", // 接口域名
    apiProtocol: "http://" // 接口协议
  },
})

然后在视频源地址前加上域名和协议即可实现跨域。

3.视频播放授权

微信小程序需要用户主动触发后才能进行视频播放，同时还需要视频播放授权。

可以在wxml文件中添加一个授权按钮，用户点击后触发js代码，进行授权。

<button bindgetphonenumber="getPhoneNumber" open-type="getPhoneNumber">授权</button>

在js代码中，可以使用getSetting方法进行授权判断，如果用户已经授权，直接进行视频播放。

wx.getSetting({

  success(res) {
    if(res.authSetting['scope.userInfo']) {
      that.videoPlay();
    } else {
      wx.authorize({
        scope: 'scope.userInfo',
        success() {
          that.videoPlay();
        }
      })
    }
  }
})

视频授权需要用户手动授权，相比较于自动授权有更好的用户体验。

4.视频封面

视频封面对于用户体验非常重要，提高了用户观看视频的兴趣和体验。

可以在wxml文件中设置视频对象的poster属性，来设置封面。

<video src="{{videoSrc}}" poster="{{videoCover}}" controls autoplay></video>

可以通过v-video插件的cover属性来设置封面。

<v-video src="{{videoSrc}}" cover="{{videoCover}}" autoplay>

需要注意的是，视频封面也需要做跨域处理。

5.小程序视频拖拽

小程序视频组件默认不支持拖拽事件，需要手动绑定touch事件，并取消默认行为，进行视频上下滑动进度的拖拽操作。

bindtouchmove: function(e) {

  this.touchEndX = e.changedTouches[0].clientX;
  this.touchEndY = e.changedTouches[0].clientY;
  if(this.touchStartX - this.touchEndX > 50) {
    this.videoSeek('right');
  } else if(this.touchEndX - this.touchStartX > 50){
    this.videoSeek('left');
  } else if(this.touchStartY - this.touchEndY > 50 && Math.abs(this.touchEndX - this.touchStartX) < 50){
    if(this.data.danmuList && this.data.danmuList.length > 0) {
      this.setData({
        danmuShow: !this.data.danmuShow
      })
    }
  }
},
bindtouchstart: function(e) {
  this.touchStartX = e.changedTouches[0].clientX;
  this.touchStartY = e.changedTouches[0].clientY;
},
bindtouchend: function(e) {
  this.touchEndX = e.changedTouches[0].clientX;
  this.touchEndY = e.changedTouches[0].clientY;
}

可以根据x坐标的滑动方向判断拖拽操作是快进还是快退，同时根据y坐标的滑动判断弹幕的显示和隐藏。

6.小程序播放器事件

小程序视频组件提供了许多事件用于监听视频的各种状态，包括：

bindplay：开始播放

bindpause：暂停播放

bindended：播放结束

bindtimeupdate：播放时间改变

bindfullscreenchange：全屏状态改变

bindwaiting：视频缓冲等待中

binderror：视频出错

可以将事件绑定到js函数中，进行控制和处理。

<video src="{{videoSrc}}" poster="{{videoCover}}" controls autoplay bindplay="videoPlay" bindpause="videoPause"></video>

videoPlay: function() {
  var that = this;
  that.setData({
    play: true,
    loading: false,
  })
},
videoPause: function() {
  var that = this;
  that.setData({
    play: false
  })
},

7.视频缓存

小程序视频组件自带了视频缓存功能，可以使用cached属性来检测当前视频是否已被缓存。

<video src="{{videoSrc}}" poster="{{videoCover}}" controls autoplay bindplay="videoPlay" bindpause="videoPause" cached="{{cached}}"></video>

视频缓存需要用户主动开启，缓存完成后可以在手机存储管理中查看到小程序缓存相关的存储信息，方便用户管理和清理视频缓存。

小程序视频播放原理

小程序视频播放的原理无非就是加载视频资源、开始播放、控制暂停、快进、快退等操作。

下面简单介绍一下视频播放的相关流程：

首先获取视频资源地址，同时需要进行跨域处理，使小程序可以访问到该资源。

将视频资源地址和视频封面等相关信息传递给小程序原生视频组件或视频插件，创建视频对象。

在用户授权播放后，触发js事件进行视频播放，在js代码中绑定视频组件提供的各种控制事件，用于控制视频的播放、暂停、快进、快退等操作。

小程序的视频播放流程相对比较简单，但是需要注意的细节也比较多。

小结

本文主要介绍了微信小程序实现视频播放的两种方法：<video>标签和视频插件，并且讲解了视频播放过程中需要注意的一些细节问题，比如视频格式、视频源地址、视频播放授权、视频封面、视频拖拽、视频缓存和视频播放事件等，最后也简单介绍了小程序视频播放的相关原理。