微信小程序视屏(video)直接横屏(全屏)播放

html

 
 

js

  /**播放视屏 */
    play(e) {
       //执行全屏方法  
       var videoContext = wx.createVideoContext('myvideo', this);
       videoContext.requestFullScreen();
       this.setData({
           fullScreen:true
       })
    },
    /**关闭视屏 */
    closeVideo() {
      //执行退出全屏方法
      var videoContext = wx.createVideoContext('myvideo', this);
      videoContext.exitFullScreen();     
    },
    /**视屏进入、退出全屏 */
    fullScreen(e){
      var isFull = e.detail.fullScreen;
      //视屏全屏时显示加载video,非全屏时,不显示加载video
      this.setData({
        fullScreen:isFull
      })
    }

css

.show{
   display:show;
}
.hide{
   display:none;
}

源码地址: https://github.com/yiyueqinghui/video-fullscreen-play
参考链接: https://developers.weixin.qq.com/miniprogram/dev/api/api-video.html

你可能感兴趣的:(微信小程序)