vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如微信内置浏览器，遇到一些挑战。 问题的症结在于微信在安卓和iOS设备上使用了不同的内核。在iOS设备上，通常可以通过设置`webkit-playsinline`和`playsinline`属性来阻止视频自动全屏播放。然而，在基于腾讯X5内核的安卓微信浏览器中，这些属性可能不起作用，需要额外的属性如`x5-playsinline`来达到相同效果。 针对这个问题，我们可以创建一个计算属性`playsinline`，根据用户代理（User Agent）来判断当前环境是iOS还是X5内核的安卓： ```javascript computed: { player () { return this.$refs.videoPlayer.player }, playsinline () { let ua = navigator.userAgent.toLocaleLowerCase() // 检查是否是X5内核 if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { return false } else { // 如果不是X5内核，假设是iOS return true } } } ``` 接下来，我们需要监听视频的`canplay`事件，以便在视频准备就绪时动态地设置这些属性： ```javascript methods: { onPlayerCanplay (player) { var ua = navigator.userAgent.toLocaleLowerCase() // 检查环境并设置属性 if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) { $('body').find('video') .attr('x-webkit-airplay', true) .attr('x5-playsinline', true) .attr('webkit-playsinline', true) .attr('playsinline', true) } else { $('body').find('video') .attr('webkit-playsinline', 'true') .attr('playsinline', 'true') } } } ``` 为了解决横竖屏切换时样式错乱的问题，我们可能需要在横屏模式下调整视频容器的尺寸，并可能需要对视频元素进行旋转处理。以下是一个例子： ```css /* CSS 旋转 */ .video_box_rotate { transform: rotate(90deg); } /* JavaScript 宽高设置 */ videoFullScreen() { let width = document.documentElement.clientWidth; let height = document.documentElement.clientHeight; document.getElementById('video_content').style.height = width + 'px'; document.getElementById('video_content').style.width = height + 'px'; } ``` 此外，确保监听视频的生命周期事件，例如播放结束、全屏状态改变等，以便在这些事件发生时执行相应的逻辑。例如： ```javascript mounted() { this.videoEnd() }, methods: { videoEnd() { // 在这里处理视频结束后的逻辑 let video = document.getElementById('video_content'); video.addEventListener('ended', function() { // ... }); }, // 其他全屏相关的事件处理方法 } ``` 总结来说，通过判断用户代理，动态设置合适的属性，并在横竖屏切换时调整视频容器的尺寸和样式，我们可以成功地解决vue-video-player在微信环境中的自动全屏播放和样式错乱问题。这个过程需要对前端开发和微信浏览器的特性有深入的理解，才能有效地调试和优化。同时，注意保持代码的可维护性和扩展性，以便应对未来可能出现的新问题。