Vue视频播放插件+横竖屏旋转全屏播放

Vue视频播放插件+全屏播放+横竖屏+弹幕

Vue视频播放插件+横竖屏旋转全屏播放

最近要写一个直播的视频播放功能，找了很久也实验很多感觉很复杂，今天介绍的插件很强大，可以解决绝大多数的视频播放问题

西瓜播放器xgplayer

我使用它局势想解决我在播放视频时，点击全屏按钮视频全屏播放（这个网上很多介绍）并且视频旋转90度横屏播放，这个就有点麻烦了，要考虑旋转后的视频宽度及兼容性。

使用方法

只需三步：安装、DOM占位、实例化即可完成播放器的使用

第一步安装

# 最新稳定版
npm install xgplayer

第二步站位DOM

<div id="mse"></div>

第三步实例化

let player = new Player({
  id: 'mse',
  url: '//abc.com/**/*.mp4'
});

效果图

竖屏播放

横屏全屏播放

代码如下

<template>
  <div>
    <div id="mse"></div>
  </div>
</template>
<script>
import Player from 'xgplayer'
export default {
  data() {
   return {
    Player: null
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    Player(url) {
      this.Player = new Player({
        el: document.querySelector('#mse'),
        url: url,
        width: '100%',
        height: '3.7rem',
        volume: 0.6, // 初始音量
        autoplay: false, // 自动播放
        playbackRate: [0.5, 0.75, 1, 1.5, 2], // 当前播放速度
        defaultPlaybackRate: 1, // 播放速度设置为1
        playsinline: true,
        fitVideoSize: 'auto', //自适应屏幕的宽高
        rotateFullscreen: true,
        // eslint-disable-next-line no-dupe-keys
        fitVideoSize: 'auto',
        videoInit: true // 初始化显示视频首帧
      })
    },
    getData() {
      this.Player('https://video.pearvideo.com/mp4/third/20210304/cont-1722181-12719568-191452-hd.mp4')
    }
  }
}
</script>
<style>
body{
  padding: 0;
  margin: 0;
}
</style>

});

后面还有很多配置跟API
连接：https://v2.h5player.bytedance.com/