Media Session API 为当前正在播放的视频，音频，提供元数据来自定义媒体通知
2024-06-11 19:58:58
google 文档 https://developers.google.cn/web/updates/2017/02/media-session
<html lang="zh-cmn-Hans"><head><meta charset="utf-8"><title>ajanuw</title><link rel="shortcut icon" type="image/ico" href="" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--移动端视图--><meta name="renderer" content="webkit" /><meta name="keywords" content="ajanuw" /><!--关键词--><meta name="description" content="ajanuw, b,c" /><!--网站内容描述--><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta http-equiv="Pragma" content="no-cache" />
</head><body><div class="audio-state">null</div><audio poster="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" src="http://dl.stream.qqmusic.qq.com/C400001IapGk0SNlnb.m4a?vkey=142B2367BEA057666BAA43D662C2E4329FC6B5C7BB02DC3F424D4DC3448F7A0ACCD2A3BB660F2E7C2D5AE61EDD1B6ADDFF1352D51EF5E7F6&guid=5617301546&uin=1641845087&fromtag=66"controls></audio><button class="play-button">click 播放</button><p><div class="doc"></div></p><script>const audioSrcs = ['http://dl.stream.qqmusic.qq.com/C400001IapGk0SNlnb.m4a?vkey=142B2367BEA057666BAA43D662C2E4329FC6B5C7BB02DC3F424D4DC3448F7A0ACCD2A3BB660F2E7C2D5AE61EDD1B6ADDFF1352D51EF5E7F6&guid=5617301546&uin=1641845087&fromtag=66'];let playButton = document.querySelector('.play-button');let audio = document.querySelector('audio');playButton.addEventListener('pointerup', function (event) {if (audio.paused) {audio.play().then(_ => {document.querySelector('.audio-state').textContent = ' playing!'setMediaSession();}).catch(error => {console.log(error)});} else {audio.pause();document.querySelector('.audio-state').textContent = ' paused!'}});function setMediaSession() {if (!('mediaSession' in navigator)) {return;}document.querySelector('.doc').textContent = 'yes .'navigator.mediaSession.metadata = new MediaMetadata({title: 'Never Gonna Give You Up',artist: 'Rick Astley', // 艺术家 namealbum: 'Whenever You Need Somebody', // 专辑 nameartwork: [{src: 'https://dummyimage.com/96x96',sizes: '96x96',type: 'image/png'},{src: 'https://dummyimage.com/128x128',sizes: '128x128',type: 'image/png'},{src: 'https://dummyimage.com/192x192',sizes: '192x192',type: 'image/png'},{src: 'https://dummyimage.com/256x256',sizes: '256x256',type: 'image/png'},{src: 'https://dummyimage.com/384x384',sizes: '384x384',type: 'image/png'},{src: 'https://dummyimage.com/512x512',sizes: '512x512',type: 'image/png'},]});navigator.mediaSession.setActionHandler('play', function () {document.querySelector('.audio-state').textContent = ' playing!'});navigator.mediaSession.setActionHandler('pause', function () {document.querySelector('.audio-state').textContent = ' paused!'});let skipTime = 10; // Time to skip in secondsnavigator.mediaSession.setActionHandler('seekbackward', function () {// 向后看// video.currentTime = Math.max(video.currentTime - skipTime, 0);});navigator.mediaSession.setActionHandler('seekforward', function () {// 向前看// video.currentTime = Math.min(video.currentTime + skipTime, video.duration);});navigator.mediaSession.setActionHandler('previoustrack', function () {// 用户点击了“上一首”媒体通知图标。// playPreviousVideo(); // load and play previous video});navigator.mediaSession.setActionHandler('nexttrack', function () {// 用户点击了“下一首”媒体通知图标// playNextVideo(); // load and play next video});}</script>
</body></html>转载于:https://www.cnblogs.com/ajanuw/p/8422176.html
Media Session API 为当前正在播放的视频，音频，提供元数据来自定义媒体通知相关推荐
- Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录 学习链接 hls.js播放m3u8视频 效果 代码 前端代码 安装hls.js App.vue 后台代码 准备文件 mp4文件切片java实现 TsController TsService ...
- UE4中如何播放全景视频/全景视频如何在VR设备中播放
UE4中如何播放全景视频/全景视频如何在VR头显中播放 1.全景视频的播放与普通视频在UE4中播放的前序流程基本一致 2.在项目的Content下新建一个Movies文件夹,把装备好的全景视频放进去 ...
- JavaScript + Audio API自制简易音乐播放器（详细完整版、小白都能看懂）
JavaScript + Audio API自制简易音乐播放器(详细完整版) ** 音乐播放器的功能清单如下: ** 1.点击暂停按钮,歌曲暂停 2.点击播放按钮,歌曲播放 3.单曲循环与取消单曲循环 ...
- html5视频录制,在HTML5视频录制方面，我们为什么选WebRTC而不选Media Recorder API
作者:Pipe(原文链接) 翻译:刘通 原标题:Why we chose WebRTC over Media Recorder API for HTML5 Video Recording 通过这篇文章 ...
- php+api抖音随机播放视频源码
简介: php+api抖音随机播放视频源码,前端纯静态html+css,数据采用php+API接口调用第三方数据,不需要配置环境,上传即用. 源码体积小,视频采集自网络,无视频资源,内置多条播放线路. ...
- 开发media play，realplayer,暴风影音 等主流播放器视频特效插件
开发media play,realplayer,暴风影音 等主流播放器视频特效插件 安装后使用 media play,realplayer,暴风影音 等主流播放器播放视频文件的时候自己显示您设置的特效 ...
- window API播放pcm格式音频文件，函数waveOutOpen等
之前在我的博客中有一篇关于编写录音器的代码,可保存为pcm和wav格式,说白了其实两者是一个东西,只不过wav比pcm多了一个文件头,这个文件头一共占了44个字节.此处这个不是重点,重点是如何编写程序 ...
- WIN10 的windows media player 允许远程控制我的播放器勾选后不生效
WIN10 的windows media player 允许远程控制我的播放器勾选后不生效 只需要执行两步: 1,点开始--运行--输入regsvr32 jscript.dll--确定 2,点开始-- ...
- 利用Windows Media Player实现倍速播放本地视频
利用Windows Media Player实现倍速播放本地视频 背景:在这样的一个特殊时期被迫开始了网上教学,我们的老师怕网络不好,直接发了录的教学资源给我们,但是看视频吧老觉得语速慢,想调倍速,本 ...
最新文章
- 论文解读 | 微信看一看实时Look-alike推荐算法
- 【压缩率3000%】上交大ICCV：精度保证下的新型深度网络压缩框架
- Windows 10 下的OpenVINO Pycharm+Anaconda开发环境配置
- PAT甲级1060 Are They Equal：[C++题解]字符串处理、有效数字、代码简洁！！！
- 数据中台产品经理面试指南（二）
- MongoDB优越性
- 剑指offer：合并两个排序的链表
- 双优先编码器_掌握双原生 ISO，提升动态范围
- git-底层-高层指令
- internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)；
- Windows 10企业批量部署实战之Windows 10客户端部署
- 计算机网络管理员教材劳动部,劳动部教材办公室
- MSVC创建的Qt工程图标设置
- 关于MVVM的面试问题
- 智能运维 VS 传统运维｜AIOps服务管理解决方案全面梳理
- android 调用短信,android中可以通过两种方式调用接口发送短信
- (1)JfreeChart之柱状图
- [创投新闻] [中英双语] FACEBOOK为美竞选上线电子投票功能并开通选民信息中心
- 比较GBDT与Xgboost、boosting与bagging
- 能一次性管理10--20个群的微信群机器人助手到底有多好用！