使用 JS 创建一个弹出式媒体播放器？

Question

我一直在尝试制作一个音频播放器，它具有允许播放音频而不是视频的基本控件。它也需要在 PIP 模式下查看。到目前为止，这是我的代码：

    var audio = document.createElement('audio'); // The Audio

    var canvas = document.createElement('canvas'); // New Canvas To Contain Video
    canvas.width = canvas.height = 512;

    var video = document.createElement('video'); // Create Video
    video.srcObject = canvas.captureStream(); // Make Video Reflect The Canvas
    video.muted = true;

    function showPictureInPictureWindow() {
      const image = new Image();
      image.crossOrigin = true;
      image.src = [...navigator.mediaSession.metadata.artwork].pop().src;
      image.decode();

      canvas.getContext('2d').drawImage(image, 0, 0, 512, 512);
      video.onloadedmetadata = function() {
        video.play();
        video.requestPictureInPicture();
      };
    }
    
    window.VID = video;
    window.AU = audio;
    
    function playAudio() {
        audio.src = "mysong.mp3";
        // Update Media Session metadata
        navigator.mediaSession.metadata = new MediaMetadata({
          title: "Audio Title",
          artist: "MEEEEEEE",
          album: "LOOOL",
          artwork: [{src: "graphics/128x128.png", sizes: "128x128", type: "image/png"}]
        });
        // Play audio
        audio.play();
        // Show track album in a Picture-in-Picture window
        showPictureInPictureWindow();
    }
    
    window.VID.requestPictureInPicture();
    playAudio();

如果您能给我任何帮助，我们将不胜感激。（我已经有暂停和播放功能，但我没有将它们包含在消息大小中）

PS：（我不知道为什么，但早些时候我收到一条错误消息“JavaScript 异常：无法在 'HTMLVideoElement' 上执行 'requestPictureInPicture' : 视频元素的元数据尚未加载”，现在我完全没有错误...也没有音乐...)

PPS:（我修复了一些错误...现在我又遇到了原来的错误。）

Answer 1

我和你有同样的问题，不过我已经解决了
我的解决方案：
我的猜测是执行RequestPicturePicture函数时视频数据没有加载成功
所以可以在loadData函数中执行RequestPicturePicture函数

使用 JS 创建一个弹出式媒体播放器？

Create a popup media player using JS?

html

javascript

video

picture-in-picture