使用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异常:未能执行'requestPictureInPicture'对'HTMLVideoElement':元数据视频元素尚未加载"现在我一点错误也没有了……也没有音乐…)

PPS:我修复了一些bug…现在又出现了原来的错误。)

Answer 1

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