vue实现谷歌浏览器全局媒体控件

最新推荐文章于 2025-01-05 09:58:32 发布

web夏目贵志

最新推荐文章于 2025-01-05 09:58:32 发布

阅读量795

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_43961899/article/details/104768844

在项目中实现谷歌浏览器的全局媒体控件，只需简单步骤即可。首先，通过调整Chrome设置开启Global Media Controls功能。然后，在Vuex中进行代码实现，方便全局调用。文章提供了解决国内文档稀缺问题的参考链接，帮助开发者实现音乐播放的前进和后退功能，并鼓励查看W3C规范以获取更多功能实现。

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

参考 https://dev-developers.whale.naver.com/tutorials/mediaSession/
https://qiita.com/clacking/items/c32f0c30e81168e6605b

做项目时遇到此功能，搜索发现国内关于该功能的文档很少，很简单，只要链接找的好🤣，正确搬砖，复制粘贴，坐享其成即可🙂🙂🙂
在这里插入图片描述

如上图所示：chrome浏览器的全局媒体控件允许用户在屏幕上显示媒体控件

播放音乐时会显示上图红框中的图标，展示方法如下：

访问 chrome://flags/ 此链接

搜索 Global Media Controls，选择Enabled模式，重新启动浏览器即可

在这里插入图片描述
代码实现此效果

可以在vuex 中实现此效果，方便全局调用

	navigator.mediaSession.metadata = new MediaMetadata({
	    title: 'Big Buck Bunny',
	    artist: 'https://peach.blender.org/',
	    artwork: [
	        { src: 'https://sample.com/test