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 前言 这篇文章与上一篇极其相似,要注 ...
随机推荐
- jquery操作radio,checkbox
1. 获取radio选中的value. $('input:radio[name=sex]:checked').val(); 2. 选择 radio 按钮 (Male). $('input:radio[ ...
- Spark2.3（三十四）：Spark Structured Streaming之withWaterMark和windows窗口是否可以实现最近一小时统计
WaterMark除了可以限定来迟数据范围,是否可以实现最近一小时统计? WaterMark目的用来限定参数计算数据的范围:比如当前计算数据内max timestamp是12::00,waterMar ...
- 微信小程序的同步操作
小程序里,大多数操作都是异步操作,一些重要的操作,如从网上获取重要变量值,必须要保证有值,后续操作才有意义.但异步操作,又必须把处理放到回调中,代码可读性降低,而且和大多数正常逻辑相背. 折腾了两天, ...
- hash bucket
什么是bucket bucket的英文解释: Hash table lookup operations are often O(n/m) (where n is the number of objec ...
- 启动apache (OS 10022)提供了一个无效的參数。解决方式
今天 apache 突然启动不起来了,查看了一下错误日志发现了例如以下错误: [Tue Mar 17 11:27:32 2015] [crit] Parent: child process exite ...
- Rplidar学习（四）—— ROS下进行rplidar雷达数据采集源码分析
一.子函数分析 1.发布数据子函数 (1)雷达数据数据类型 Header header # timestamp in the header is the acquisition time of # t ...
- Linux 系统实时监控的瑞士军刀 —— Glances
Linux 系统实时监控的瑞士军刀 —— Glances 对于 RHEL/CentOS/Fedora 发行版 ## RHEL/CentOS 7 64-Bit ## # wget http://dl.f ...
- Android UI系列-----LinearLayout的综合使用
这里将会对LinearLayout的布局方式进行一个综合的使用,通过一个例子来看看LinearLayout的嵌套布局方式,在这之前首先介绍三个属性: 1.①android:layout_weigth: ...
- linux每日命令(17)：which命令
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置. f ...
- 《Essential C++》读书笔记 之 泛型编程风格
<Essential C++>读书笔记 之 泛型编程风格 2014-07-07 3.1 指针的算术运算(The Arithmetic of Pointer) 新需求1 新需求2 新需求3 ...