[Proposal] Page independent Media Context API

Jxck · 2019-04-21

Media Playing and SPA

there are lots of use-case which seems not necessary to make it SPA. (I means you can navigate page with state change)

but when you playing audio/video, you should do SPA. because you can’t navigate other page without terminating media playing.

for example, imagine playing audio with grabbing playlist. you can’t choice other artist/album name, without stopping current music if you don’t make it SPA. other way to make it possible is separate playlist / audio player with iframe.

Problem

If you have playlist static page and have audio/video tag in that page. you can do it only html and standard api, and that works fine for not navigating, but once you want to “continue playing while searching other music” suddenly you need to use tons of JS and learn SPA.

can’t we make it easy for continue playing while navigating ?

Page independent Media Context API

Picture in Picture seems out of window context for playing audio/video. but actually not. if you navigate parent page (who has video/audio tag of PiP), media playing will stop.

but if PinP audio player continue playing while page navigates, it seems solution.

Who playing audio/video ?

i don’t have best solution but some ideas.

ex, playing media over page will stop page navigate. but service worker are running cross page. so if audio/video can play over service worker and display in PinP seems work.

service worker response audio/video file to audio/video tag, and if user enables it PinP, that makes Page independent Context for media playing. and parent page navigates, PinP can return to audio/video tag which current page have.

Risk/Security Consideration

I think this API will used by Ad, so its necessary to let user disable by permission, and have UI for easy to turn off.

use case

It cover use-case like

Audio Player (like spotify/soudcloud etc)
Video Player (Youtube/Fulu etc)
Video Chat
Gaming
etc

and make them easy to build static page base site (SPA free) but continue to playing critical medias.

AshleyScirra · 2019-04-21

I think SoundCloud solved this just by using frames: the music player and the page content are two separate top-level frames, so the content can navigate without interrupting the music player. Doesn’t that avoid the need for another API?

Jxck · 2019-04-22

I think you saying page like below

<body>
  <iframe src=playlist.html></iframe>
  <iframe src=player.html></iframe>
</body>

or you can playlist in iframe in player page.

<body>
  <!-- player page -->
  <iframe src=playlist.html></iframe>
  <audio src=music.mp3></audio>
</body>

navigate in iframe works.

but I’m saying like below if using iframe. page itself is playlist and have player in the page.

<body>
  <h1>playlist</h1>
  <!-- playlists...-->
  <iframe src=player.html></iframe>
</body>

but this doesn’t works. playlist can’t navigate without stopping player.

player is belongs to page like below.

<body>
  <h1>playlist</h1>
  <!-- playlists...-->
  <audio src=music.mp3></audio>
</body>

and navigatable works fine if possible.

AshleyScirra · 2019-04-22

So why not just rearrange the iframes to one of the cases that works?

guest271314 · 2019-08-21

One option is to navigate the <iframe>

  <input type="text"><button>navigate</button>
  <h1>click</h1> <!-- requestPictureInPicture(), play playlist-->
  <iframe></iframe>  
  <script>
   const iframe = document.querySelector("iframe");
   const input = document.querySelector("input");
   const button = document.querySelector("button");
   iframe.width = screen.width; 
   iframe.height = screen.height - input.height;
   button.onclick = _ => {
    iframe.src = input.value;
  }
  </script>