Bootstrap

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

html

 <button   bindtap='play' >播放</button>
 <video id='myvideo' class='{{fullScreen?"show":"hide"}}'   src="视屏地址"  autoplay="true" bindfullscreenchange="fullScreen"  bindended="closeVideo"  controls></video>

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

;