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 前言 这篇文章与上一篇极其相似,要注 ...
随机推荐
- sql server management studio 查询的临时文件路径
C:\Users\你的登录名称\Documents\SQL Server Management Studio\Backup Files C:\Users\你的登录名称\AppData\Local\Te ...
- Nginx关于跨域的配置
参考:https://www.cnblogs.com/sunmmi/articles/5956554.html 最终我们项目中的配置如下: upstream boss_gateway { server ...
- 分区工具parted的详解及常用分区使用方法【转】
来源:http://blog.51cto.com/zhangmingqian/1068779 分区工具parted的详解及常用分区使用方法 一. parted的用途及说明 概括使用说明 ...
- Mac Apache Tomcat WebServer 服务器配置
1.配置准备工作 1)配置服务器准备工作 在 Finder 中创建一个 "workspace" 的文件夹,可直接创建在 /Users/QianChia(当前用户名)目录下. 下载相 ...
- Go 程序的性能调试问题
英文原文:Debugging performance issues in Go programs 假设你手上有个Go语言编写的程序,你打算提升它的性能.目前有一些工具可以为此提供帮助.这些工具能帮你发 ...
- flutter 环境安装以及配置
首先需要下载flutter源码,以下是github地址: https://github.com/flutter/flutter 然后需要安装git环境吧,下图红框可以自行下载安装 接下来需要安装flu ...
- Python3多线程之间的执行顺序问题
[本文出自天外归云的博客园] 一个多线程的题:定义三个线程ID分别为ABC,每个线程打印10遍自己的线程ID,按ABCABC……的顺序进行打印输出. 我的解法: from threading impo ...
- swift 遍历枚举
// see at http://swifter.tips/enum-enumerate/ // 貌似有些空格在粘贴的时候没有了... = =! import Foundation en ...
- 一键解包/打包boot.img/recovery.img工具（高通/MTK双版 支持android 5.1以上）
下载地址: 链接: https://pan.baidu.com/s/1hsA2oWc 密码: skdx
- JVM学习（3）——总结Java内存模型---转载自http://www.cnblogs.com/kubixuesheng/p/5202556.html
俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及到的知识点总结如下: 为什么学习Java的内存模式 缓存一致性问题 什么是内存模型 JMM(Java Memory Model)简 ...