解决ios在微信内置浏览器中video播放的全屏问题

最新推荐文章于 2025-03-11 16:51:32 发布

蓝色之恋love

最新推荐文章于 2025-03-11 16:51:32 发布

阅读量3.1k

点赞数 4

文章标签： ios html5

本文链接：https://blog.csdn.net/raingrains/article/details/126233860

版权

本文介绍了如何处理在部分安卓和iOS微信浏览器中video标签默认全屏播放的问题。通过添加特定属性如webkit-playsinline、playsinline和x5-video-player-type，可以避免视频在微信内全屏播放，实现内联播放。示例代码展示了如何在获取到媒体流后创建并配置video标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

video 标签在部分的安卓微信和iOS的微信浏览器上点击播放会默认全屏展示

解决部分安卓默认全屏展示，给video标签加如下属性

x5-video-player-type="h5-page"

解决IOS的微信浏览器会默认全屏展示，加这两个属性

webkit-playsinline playsinline

成品如下

<video webkit-playsinline playsinline x5-video-player-type="h5-page"></video>

微信内置浏览器中使用video播放摄像头获取的流媒体

async function init(){
            const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
            console.log(mediaStream);
            const video = document.createElement('video');
            try {
                video.srcObject = mediaStream
            } catch (error) {
                    video.src = window.URL.createObjectURL(mediaStream);
            }

            // video.controls = true;
            video.className = 'video-preview';
            video.setAttribute('autoplay', true)  // ios的自动播放无效，可以使用play()方法让用户手动触发
		    video.setAttribute('playsinline', true)
		    video.setAttribute('webkitPlaysinline', true)
		    video.setAttribute('x5VideoPlayerType', 'h5-page')
          
            document.body.appendChild(video);
        }

        init()