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 前言 这篇文章与上一篇极其相似,要注 ...
随机推荐
- org.springframework.web.util.WebUtils.isSameOrigin(WebUtils.java:816)
Nginx反向代理WebSocket时报这个错,普通的http请求没问题,ws请求报错 可能原因: 1.你用了4.2.5.RELEASE版本或者4.2.6.RELEASE,升级到4.2.7.RELEA ...
- 【SQL 代码】SQL复制数据表及表结构
select * into 目标表名 from 源表名 from 源表名 以上两句都是将'源表'的数据插入到'目标表',但两句又有区别的: 第一句(select into from)要求目标表不存在, ...
- WIN10平板如何打开文件夹选项
打开计算机,然后查看,最后可以找到选项
- [kubernetes]helm安装
下载 HELM_VERSION=${K8S_VERSION:-"2.11.0"} HELM="helm-v${HELM_VERSION}-linux-amd64" ...
- Struct2 （一）
STRUCT2 权威指南(1) MVC思想将一个应用分成三个基本部分:Model(模型).View(视图)和Controller(控制器),这三个部分以最少的耦合协同工作,从而提高应用的可扩展性及可维 ...
- [转]linux(ubuntu)上运行网易popo
popo没有linux版,连web版和android版都没有,这个实在是不方便.搞了很久,终于搞定了ubuntu上运行popo,暂时还没出现什么问题. 首先要安装PlayOnLinux,直接安装win ...
- redis 连接 docker容器 6379端口失败
redis部署在docker容器中Could not connect to Redis 容器内redis-cli是可以直接连上的,但是在另一台服务器上就不能用外网ip来连了 虽然我创建redis容器时 ...
- 完美的代码生成器SNF.CodeGenerator-快速开发者的利器--SNF快速开发平台3.1
第1章 SNF.CodeGenerator代码生成器简介 本项目是完全基于Spring.Net.Framework 平台进行研发.与Spring.Net.Framework平台无缝衔接.并支持模型层. ...
- 【R作图】蜜蜂群图beeswarm和jitter的使用
最近经常要画好看的盒形图,还要在上面加入散点,所以总结了两个方法. 第一种方法是,利用beeswarm函数: library(beeswarm) beeswarm 蜜蜂群图 http://rgm3.l ...
- 第一部分：开发前的准备-第三章 Application 基本原理
第3章 应用程序基本原理 首先我们需要强调一下Android 应用程序是用java写的.Android SDK工具编译代码并把资源文件和数据打包成一个文件.这个名字的扩展名是.APK.要在androi ...