🔥 热搜 🔥
上海习近平新疆鄂州父女瓜乌鲁木齐疫情H工口小学生赛高习明泽芊川一笑图包印尼排华
分类
社会娱乐国际人权科技经济其它
🔥 热搜 🔥
百度今日热点微信公众平台贴吧opggdnf私服百度贴吧知乎dnf公益服百度傻逼
分类
社会娱乐国际人权科技经济其它
查看原文
其他

【第2009期】实现 Bilibili 视频播放Chrome 媒体控制效果

jackpu 前端早读课 2021-03-03

前言

这个API挺酷的，直接把画中画都集成进去了。今日早读文章由阿里@蒲欢授权分享。

正文从这开始~~

Chrome 最新的版本更新了媒体控制菜单的按钮 UI，也就是每次我们的网页产生声音或者视频时候，菜单栏头像附近，方便我们在多个 Tab 进行控制时候加的，方便我们操作这些网页 Tab 下面的音视频。

尤其最新的样式实现非常酷炫，加入对封面的支持，这样整体效果看着非常棒。

很早之前我们写过一篇关于 使用 mediaSession 实现媒体播放的通知栏控制 这里介绍了我们如何在网页播放音频的时候锁屏控件如何显示当前播放音乐的封面和简介，或者控制上一曲下去。

同意视频播放现在也可以，你只需要监听 MediaSession 的相关事件然后设置 mediaSession MetaData 的信息就好。

设置封面标题

  1. if ('mediaSession' in navigator) {

  2. var data = mediaList[index]

  3. navigator.mediaSession.metadata = new MediaMetadata({

  4. title: data.title,

  5. artist: data.director,

  6. artwork: [

  7. { src: data.cover, sizes: '192x192' }

  8. ]

  9. });

  10. }


进行播放控制

  1. // $video has been attached with the DOM element

  2. if ('mediaSession' in navigator) {

  3. var ms = navigator.mediaSession

  4. ms.setActionHandler('play', function () {

  5. $video.play()

  6. });

  7. ms.setActionHandler('nexttrack', function () {

  8. playNext()

  9. });

  10. ms.setActionHandler('previoustrack', function () {

  11. playPrev()

  12. });

  13. ms.setActionHandler('pause', function() {

  14. $video.pause()

  15. });

  16. }


这个在 Android 手机上依旧有效

具体实现代码

  1. <!doctype html>

  2. <html lang="en">


  4. <head>

  5. <title>实现类似 BiLiBiLi 的播放浮层控制</title>

  6. <meta charset="utf-8">

  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  9. <link rel="stylesheet" href="/fwc//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />


  11. <style type="text/css">

  12. html {

  13. font-family: sans-serif;

  14. -ms-text-size-adjust: 100%;

  15. -webkit-text-size-adjust: 100%;

  16. font-size: 62.5%;

  17. -webkit-tap-highlight-color: transparent

  18. }


  20. body {

  21. font-family: 'Helvetica Neue', '\5FAE\8F6F\96C5\9ED1', '\9ED1\4F53', sans-serif;

  22. letter-spacing: .01rem;

  23. font-size: 15px;

  24. line-height: 1.75em;

  25. color: #3A4145;

  26. -webkit-font-feature-settings: 'kern'1;

  27. -moz-font-feature-settings: 'kern'1;

  28. -o-font-feature-settings: 'kern'1;


  30. }


  32. h1 {

  33. padding-top: 40px;

  34. text-align: center;

  35. }


  37. .main {

  38. max-width: 720px;

  39. margin: 80px auto;

  40. text-align: center;

  41. }


  43. .main video {

  44. max-width: 100%;

  45. height: auto;

  46. }

  47. </style>

  48. <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>

  49. </head>


  51. <body class="doc">

  52. <h1>实现类似 BiLiBiLi 的播放浮层控制</h1>


  54. <div class="main">

  55. <video controls poster="https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png"

  56. src="https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4" />

  57. </div>


  59. <script type="text/javascript">


  61. var mediaList = [{

  62. src: 'https://media.vued.vanthink.cn/CJ7%20-%20Trailer.mp4',

  63. cover: 'https://img1.wxzxzj.com/vpc-example-cover-CJ7-c.jpg',

  64. title: "长江七号-周星驰导演作品，关于外星人的童话故事"

  65. }, {

  66. src: 'https://media.vued.vanthink.cn/sparkle_your_name_am360p.mp4',

  67. cover: 'https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png',

  68. title: "你的名字-新海诚导演作品，穿越彼此的身体，遇见不可思议"

  69. }, {

  70. src: 'https://media.vued.vanthink.cn/the_garden_of_words_trailer_english__1080p.mp4',

  71. cover: 'https://img1.wxzxzj.com/vpc-example-cover-the-garden-c.jpg',

  72. title: "言叶之庭-新海诚导演作品，下雨天静谧的动静也有唯美的相遇"

  73. }]




  77. $(function () {

  78. var $video = document.querySelector('video')

  79. var index = 1

  80. function playNext() {

  81. if (index === 2) {

  82. index = 0

  83. } else {

  84. index += 1

  85. }

  86. setMediaSession(index)

  87. $video.src = mediaList[index].src

  88. $video.play()

  89. }


  91. function playPrev() {

  92. if (index === 0) {

  93. index = 2

  94. } else {

  95. index -= 1

  96. }

  97. setMediaSession(index)

  98. $video.src = mediaList[index].src

  99. $video.play()

  100. }


  102. initMediaSession()


  104. function setMediaSession(index) {

  105. if ('mediaSession' in navigator) {

  106. var data = mediaList[index]

  107. navigator.mediaSession.metadata = new MediaMetadata({

  108. title: data.title,

  109. artist: data.director,

  110. artwork: [

  111. { src: data.cover, sizes: '192x192' }

  112. ]

  113. });

  114. }

  115. }


  117. function initMediaSession() {

  118. if ('mediaSession' in navigator) {

  119. var ms = navigator.mediaSession

  120. setMediaSession(index)


  122. ms.setActionHandler('play', function () {

  123. $video.play()

  124. });

  125. ms.setActionHandler('nexttrack', function () {

  126. console.log(3333)

  127. playNext()

  128. });

  129. ms.setActionHandler('previoustrack', function () {

  130. playPrev()

  131. });

  132. // navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });

  133. // navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });

  134. // navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });

  135. // navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });

  136. // navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });


  138. }

  139. }

  140. })

  141. </script>

  142. </body>


  144. </html>

扩展阅读

  • https://developer.mozilla.org/en-US/docs/Web/API/MediaSessionAPI

  • https://caniuse.com/#search=mediasession

关于本文 作者：@蒲欢 原文：https://www.jackpu.com/ru-he-shi-xian-bilibili-shi-pin-bo-fang-chrome-mei-ti-kong-zhi-xiao-guo/

@蒲欢曾分享过


【第1819期】Web 视频播放前前后后


【第645期】写给刚入门的前端工程师的前后端交互指南


欢迎自荐投稿，前端早读课等你来

    您可能也对以下帖子感兴趣

    文章有问题？点此查看未经处理的缓存