QQ浏览器中video标签的播放按钮显示异常怎么办？

a'ゞ静欣提问于 2026-02-16 03:03:32 阅读 10

移动

在QQ浏览器里用video标签做视频播放时，系统自带的播放按钮总是显示成灰色不可点击状态，但视频能正常自动播放。其他浏览器都正常，这是为什么啊？

代码就很简单这样写的：


<video id="myVideo" style="width:100%">
  <source src="demo.mp4" type="video/mp4">
</video>

我试过加controls属性、设置width/height、用JavaScript调用play()方法，按钮虽然能显示出来但点击没反应。控制台也没报错，求大神指点迷津…

QQ浏览器

我来解答赞 3 收藏

反馈

1 条解答

南宫雨晨 Lv1

这个问题我也遇到过，QQ浏览器对video标签的处理确实有点奇葩。主要是因为它对自动播放策略和controls的行为做了特殊限制。

解决办法是这样的：你需要同时设置autoplay、muted和playsinline这三个属性。QQ浏览器默认会把非静音的视频播放按钮置灰，加上muted就能解决问题。

修改后的代码大概是这样：

<video id="myVideo" style="width:100%" autoplay muted playsinline controls>

  <source src="demo.mp4" type="video/mp4">

</video>

要是想更稳妥点，可以用wp_enqueue_script加载个小脚本来处理兼容性问题：

function custom_video_fix() {

    wp_add_inline_script( 'custom-video-fix', '

        document.addEventListener("DOMContentLoaded", function() {

            var videos = document.querySelectorAll("video");

            videos.forEach(function(video) {

                if (video.paused) {

                    video.muted = true;

                    video.play();

                }

            });

        });

    ');

}

add_action('wp_enqueue_scripts', 'custom_video_fix');

这个方法用到了WordPress的钩子函数，在页面加载时自动处理所有video标签。记得把这段代码放到你主题的functions.php文件里就行。

说实话，这种浏览器特定的问题最烦人了，不过加上这些处理基本都能正常工作。调试这类问题真是费头发啊。

2026-02-16 08:05