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

编程问答 2022-05-26

问题描述

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

解决方法

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

htmljavascriptpicture-in-picturevideovideo