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 前言 这篇文章与上一篇极其相似,要注 ...
随机推荐
- angular default project (angular.json的解读)
Change the default Angular project Understanding it's purpose and limits Klaus KazlauskasFollow Nov ...
- webservice-整理
webservice-整理 RPC与WebService的区别:https://blog.csdn.net/defonds/article/details/71641634 http://www.di ...
- [Canvas]Bombman v1.04
Bombman是我仿造红白机上经典游戏爆破小人,用Canvas制作的一款网页版单机游戏, 自我感觉还是有一定的可玩性. 本游戏的胜利条件是用雷消灭所有怪物,但被怪物即使是擦边碰到或是炸弹火焰炸到就算失 ...
- 马斯克：有62%的程序员认为人工智能会被武器化 #精选AR人工智能算法
当地时间 9 月 13 日,马斯克在自己的个人推特账号上转推了一篇名为<Hackers Have Already Started to Weaponize Artificial Intellig ...
- SpringCloud实战2-Ribbon客户端负载均衡
https://www.cnblogs.com/huangjuncong/p/9022055.html
- shell编程学习笔记（二）：Shell中变量的使用
变量在很多编程语言中都有,Shell中也不例外,我们下面看一下Shell中的变量怎么使用: 以下蓝色字体部分为Linux命令,红色字体的内容为输出的内容: # cd /opt/scripts # vi ...
- Java调用Elasticsearch API查询及matchPhraseQuery和matchQuery的区别
一.引入依赖 <!--Elasticsearch client--> <!-- https://mvnrepository.com/artifact/org.elasticsearc ...
- 使用PostgreSQL存储时序数据
操作系统 :CentOS7.3.1611_x64 PostgreSQL版本 :9.6 问题描述 在InfluxDB中存储时序数据时,当tag值和时间戳都相同时会执行覆盖操作.在PostgreSQL中能 ...
- C#反射实现
一.反射概念: 1.概念: 反射,通俗的讲就是我们在只知道一个对象的外部而不了解内部结构的情况下,通过反射这个技术可以使我们明确这个对象的内部实现. 在.NET中,反射是重要的机制,它可以动态的分析程 ...
- 10.1.翻译系列：EF 6中的实体映射【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/configure-entity-mappings-using-fluent-api.a ...