Chrome和Edge中HTML5视频出现Chromecast图标，求原因及移除方法

问题原因 #

这个Chromecast投屏图标是浏览器内置全局媒体控件层生成的UI元素，不属于网页自身的DOM结构，所以在开发者控制台找不到对应的元素。近期Chrome和Edge的版本更新中，默认启用了全局媒体控件的投屏功能，只要页面中的<video>元素满足加载/播放条件（比如触发canplay事件并开始播放），浏览器就会自动在视频区域显示这个投屏图标。

移除方法 #

方法一：全局禁用浏览器投屏按钮 #

• Chrome：在地址栏输入 chrome://flags/#global-media-controls-cast-button，将该选项设置为Disabled，重启浏览器后生效。
• Edge：在地址栏输入 edge://flags/#global-media-controls-cast-button，同样设置为Disabled后重启浏览器。

方法二：针对单页通过代码控制 #

1. 禁用远程播放功能

给<video>元素添加disableRemotePlayback属性，同时通过controlsList限制原生控件的显示项：

<video id='video' preload='auto' style="width: 300px;" controlsList="nodownload nofullscreen noremoteplayback" disableRemotePlayback>

该属性会直接禁用视频的远程播放（包括投屏）功能，浏览器也就不会显示投屏图标。

2. 隐藏原生控件，使用自定义播放器

如果不需要原生媒体控件，可以直接隐藏原生控件，自己实现自定义播放控制：

<video id='video' preload='auto' style="width: 300px;" controls="false">

然后通过JS实现播放、暂停等自定义控制逻辑，完全规避浏览器的原生控件。

3. CSS强制隐藏（依赖浏览器DOM结构，可能随版本失效）

针对Chrome/Edge的全局媒体控件容器，用CSS强制隐藏投屏按钮：

.global-media-controls-overlay .cast-button {
    display: none !important;
}

问题复现示例 #

HTML代码 #

<video id='video' preload='auto' style="width: 300px;">

JS代码 #

$("#video").on("canplay", function() {
    $("#video")[0].play(); 
});

问题截图 #

内容的提问来源于stack exchange，提问作者Stev