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

您所在的位置：网站首页 › 怎么让腾讯视频竖屏播放全屏 › Vue视频播放插件+横竖屏旋转全屏播放

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

2024-06-20 01:06| 来源: 网络整理| 查看: 265

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

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

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

西瓜播放器xgplayer

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

使用方法

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

第一步安装

# 最新稳定版 npm install xgplayer

第二步站位DOM

第三步实例化

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

竖屏播放在这里插入图片描述横屏全屏播放

代码如下 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') } } } body{ padding: 0; margin: 0; } });

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

【本文地址】

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

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

今日新闻

推荐新闻