0

我一直在尝试制作一个具有基本控件的音频播放器，允许播放音频而不是视频。它也需要在 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：（我修复了一些错误......现在我又遇到了原来的错误。）

4

1 回答 1

2

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

于 2021-06-18T03:26:10.077 回答