Media Session API 为当前正在播放的视频，音频，提供元数据来自定义媒体通知
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', // 艺术家 name
album: 'Whenever You Need Somebody', // 专辑 name
artwork: [{
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 seconds
navigator.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>
Media Session API 为当前正在播放的视频，音频，提供元数据来自定义媒体通知的更多相关文章
- Swift - 使用Media Player播放本地视频，在线视频
Media Player框架用于播放本地视频.音频,也可以在线播放视频和音频. 1,播放器MPMovieControlStyle样式有如下几种: (1)None: 没有播放控制控件 (2)Embedd ...
- TensorFlow源代码学习--1 Session API reference
学习TensorFlow源代码,先把API文档扒出来研究一下整体结构: 一下是文档内容的整理,简单翻译一下 原文地址:http://www.tcvpr.com/archives/181 TensorF ...
- 【C++】从零开始，只使用FFmpeg，Win32 API，实现一个播放器（一）
前言 起初只是想做一个直接读取视频文件然后播放字符动画的程序.我的设想很简单,只要有现成的库,帮我把视频文件解析成一帧一帧的原始画面信息,那么我只需要读取里面的每一个像素的RGB数值,计算出亮度,然后 ...
- Android开发 MediaPlayer入门_播放本地视频
前言 MediaPlayer,可以播放视频/音频,并且它支持本地和网络文件的播放.本片博客作为入门教程,先以最通俗的方式解释播放文件本地视频.(如果你嫌MediaPlayer还是太麻烦可以试试选择Vi ...
- Android音频开发之——如何播放一帧音频
本文重点关注如何在Android平台上播放一帧音频数据.阅读本文之前,建议先读一下<Android音频开发(1):基础知识>,因为音频开发过程中,经常要涉及到这些基础知识,掌握了这些重要的 ...
- 利用开源jPlayer播放.flv视频文件
最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...
- android 随手记 videoview循环播放网络视频 和mediaplayer+sufaceview播放网络视频
1:videoview循环播放视频 1>xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res ...
- iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件
iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 步骤 第一步:在 Proj ...
- iOS Dev (21) 用 AVPlayer 播放一个本地音频文件
iOS Dev (21) 用 AVPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 前言 这篇文章与上一篇极其相似,要注 ...
随机推荐
- mac上配置mysql与redis server,并结合Pydev准备某爬虫环境
mysql下安装mysql server mysql下安装redis server:https://www.jianshu.com/p/3bdfda703552 mac下安装配置redis:https ...
- windows 系统中的 afd 驱动
afd 的全称是 Ancillary Function Driver for WinSock,是 windows 系统网络部分的核心工具.同 Linux 类似,windows 的 socket 最终也 ...
- 修改和查询sqlserver里面的xml 好像只能一个个改不能批量
select [ExtendFieldId], [Setting].value('(/UploadFileViewModel/UploadProviderKey)[1]', 'nvarchar(max ...
- android异步向服务器请求数据
下面就android向服务器请求数据的问题分析如下: 1.在android4.0以后的版本,主线程(UI线程)不在支持网络请求,原因大概是影响主线程,速度太慢,容易卡机,所以需要开启新的线程请求数据: ...
- javascript es6 箭头函数
1.箭头函数示例 let add = (a,b) => a + b //没有语句块时,默认作为返回值 add(1,2); var multi = (a,b) => {ret ...
- Socket网络编程--简单Web服务器(2)
上一小节通过阅读开源的Web服务器--tinyhttpd.大概知道了一次交互的请求信息和应答信息的具体过程.接下来我就自己简单的实现一个Web服务器. 下面这个程序只是实现一个简单的框架出来.这次先实 ...
- maven的配置及一些常用命令
一般来说,github上大多的java项目都是使用maven,ant等进行构建的.由于之前没有使用过maven,因此这几天对maven进行了简单的学习.古话说:“温故而知新”,一些命令长时间不使用都会 ...
- rand()产生随机数 及其和clock()的不同
rand()使用 首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand产生随机数. 定义函数 : int rand(void) 函数说明 :因为rand的内部实现 ...
- 《转》vue更新到2.0之后vue-resource不在更新，axios的使用
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- Approx Analytic Arealight
试着实现的基于分析方法的近似面积光源.