vue-video-player solves the problem of automatic full-screen playback of WeChat (the problem of horizontal and vertical screen causing style disorder)

For vue-video-player, fromgithubFind a code on it and put it directly on the page! OK, the video is displayed! Start the next function. . . .

This may be the usual thinking pattern of most front-end developers. They use a plug-in and look at the demo and it will be done. The function display will be normal and OK, but once there is a bug, it will be programmed for Baidu or Google!

Actually, I am the same, hahahaha...

Without further ado, I have been working on a video playback function recently. After finding the vue-video-player plug-in, Kakaka finished it, holding my love crazy and performing perfectly! However, the display of other people's domestic brand mobile phones is completely different. They automatically have full screen after opening, and there is also a horizontal and vertical screen control. "Is this the page I wrote?????" Ten thousand divine beasts were running in my heart. After switching horizontally and vertically, part of the content under the video is displayed in full screen mode.

I spent a long time on Baidu and looked at the source code, but I still don’t know what happened.

Finally found a solution:

Previously: playsinline="playsinline" was written in true here, but now it is changed to the calculation attribute playsinline()

 computed: {
  player () {
   return this.$
  },
  playsinline () {
   let ua = ()
   // x5 kernel   if ((/tencenttraveler/) != null || (/qqbrowse/) != null) {
    return false
   } else {
    // ios terminal    return true
   }
  }
 }

The calculation attribute of playsinline() is added because the kernel used in Android and iOS is different, and the attribute required is also different. After trying, the x5 kernel is used to return false, otherwise it is true

In conjunction with the jq tool, continue to add the required properties of both ends.

@canplay="onPlayerCanplay($event)"
onPlayerCanplay (player) {
   var ua = ()
   // x5 kernel   if ((/tencenttraveler/) != null || (/qqbrowse/) != null) {
    $('body').find('video').attr('x-webkit-airplay', true).attr('x5-playsinline', true).attr('webkit-playsinline', true).attr('playsinline', true)
   } else {
    // ios terminal    $('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true')
   }
  },

At this point, it perfectly solves the problem that the horizontal and vertical screen playback styles are inconsistent and the video content is not adaptable during playback.

Rotate the video 90 degrees for compatible ios horizontal screen

methods: {
// Set the video width and height to the mobile phone width and height    videoFullScreen() {
      let width = ;
      let height = ;
      ('video_content'). = width + 'px';
      ('video_content'). = height + 'px';
    },
  }

／*Video rotation*/
.video_box_rotate{

  transform rotate(90deg)
}

Video monitoring playback ends, enters full screen, exits full screen events

mounted() {()},
methods: {
  videoEnd(){
let video = ('video_content');
('ended', () => {
alert('video end')
});

}; // The video playback ends}
// Full screen event x5videoenterfullscreen// Exit full screen x5videoexitfullscreen

Monitor the horizontal and vertical screen of the mobile phone

('orientationchange', function() {
          // alert(); // Here you can do the corresponding processing according to orientation          if ( === -90) {
             = true;
          } else {
             = false;
          }
        }, false);

This is the article about vue-video-player solving the problem of automatic full-screen playback of WeChat (the problem of horizontal and vertical screen causing style confusion). For more related vue-video-player automatic full-screen content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!