前言
這個API挺酷的，直接把畫中畫都集成進去了。今日早讀文章由阿里@蒲歡授權分享。
正文從這開始~~
Chrome 最新的版本更新了媒體控制菜單的按鈕 UI，也就是每次我們的網頁產生聲音或者視頻時候，菜單欄頭像附近，方便我們在多個 Tab 進行控制時候加的，方便我們操作這些網頁 Tab 下面的音視頻。
尤其最新的樣式實現非常酷炫，加入對封面的支持，這樣整體效果看著非常棒。
很早之前我們寫過一篇關於 使用 mediaSession 實現媒體播放的通知欄控制 這裡介紹了我們如何在網頁播放音頻的時候鎖屏控制項如何顯示當前播放音樂的封面和簡介，或者控制上一曲下去。
同意視頻播放現在也可以，你只需要監聽 MediaSession 的相關事件然後設置 mediaSession MetaData 的信息就好。
設置封面標題if ('mediaSession' in navigator) {
var data = mediaList[index]
navigator.mediaSession.metadata = new MediaMetadata({
title: data.title,
artist: data.director,
artwork: [
{ src: data.cover, sizes: '192x192' }
]
});
}
進行播放控制// $video has been attached with the DOM element
if ('mediaSession' in navigator) {
var ms = navigator.mediaSession
ms.setActionHandler('play', function () {
$video.play()
});
ms.setActionHandler('nexttrack', function () {
playNext()
});
ms.setActionHandler('previoustrack', function () {
playPrev()
});
ms.setActionHandler('pause', function() {
$video.pause()
});
}
這個在 Android 手機上依舊有效
具體實現代碼
<!doctype html>
<html lang="en">
<head>
<title>實現類似 BiLiBiLi 的播放浮層控制</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
<style type="text/css">
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
-webkit-tap-highlight-color: transparent
}
body {
font-family: 'Helvetica Neue', '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53', sans-serif;
letter-spacing: .01rem;
font-size: 15px;
line-height: 1.75em;
color: #3A4145;
-webkit-font-feature-settings: 'kern'1;
-moz-font-feature-settings: 'kern'1;
-o-font-feature-settings: 'kern'1;
}
h1 {
padding-top: 40px;
text-align: center;
}
.main {
max-width: 720px;
margin: 80px auto;
text-align: center;
}
.main video {
max-width: 100%;
height: auto;
}
</style>
<script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body class="doc">
<h1>實現類似 BiLiBiLi 的播放浮層控制</h1>
<div class="main">
<video controls poster="https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png"
src="https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4" />
</div>
<script type="text/javascript">
var mediaList = [{
src: 'https://media.vued.vanthink.cn/CJ7%20-%20Trailer.mp4',
cover: 'https://img1.wxzxzj.com/vpc-example-cover-CJ7-c.jpg',
title: "長江七號-周星馳導演作品，關於外星人的童話故事"
}, {
src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',
cover: 'https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png',
title: "你的名字-新海誠導演作品，穿越彼此的身體，遇見不可思議"
}, {
src: 'https://media.vued.vanthink.cn/the_garden_of_words_trailer_english__1080p.mp4',
cover: 'https://img1.wxzxzj.com/vpc-example-cover-the-garden-c.jpg',
title: "言葉之庭-新海誠導演作品，下雨天靜謐的動靜也有唯美的相遇"
}]
$(function () {
var $video = document.querySelector('video')
var index = 1
function playNext() {
if (index === 2) {
index = 0
} else {
index += 1
}
setMediaSession(index)
$video.src = mediaList[index].src
$video.play()
}
function playPrev() {
if (index === 0) {
index = 2
} else {
index -= 1
}
setMediaSession(index)
$video.src = mediaList[index].src
$video.play()
}
initMediaSession()
function setMediaSession(index) {
if ('mediaSession' in navigator) {
var data = mediaList[index]
navigator.mediaSession.metadata = new MediaMetadata({
title: data.title,
artist: data.director,
artwork: [
{ src: data.cover, sizes: '192x192' }
]
});
}
}
function initMediaSession() {
if ('mediaSession' in navigator) {
var ms = navigator.mediaSession
setMediaSession(index)
ms.setActionHandler('play', function () {
$video.play()
});
ms.setActionHandler('nexttrack', function () {
console.log(3333)
playNext()
});
ms.setActionHandler('previoustrack', function () {
playPrev()
});
// navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
// navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
// navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
// navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
// navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
}
}
})
</script>
</body>
</html>
擴展閱讀關於本文作者：@蒲歡原文：https://www.jackpu.com/ru-he-shi-xian-bilibili-shi-pin-bo-fang-chrome-mei-ti-kong-zhi-xiao-guo/
@蒲歡曾分享過
【第1819期】Web 視頻播放前前後後
【第645期】寫給剛入門的前端工程師的前後端交互指南
歡迎自薦投稿，前端早讀課等你來