Question

如何在一个画布上同时全屏显示两个视频？

我正在尝试创建一个视频播放器，使其仅使用一个视频控制界面即可一次播放两个视频。我尝试了不同的方法，并感谢有关如何开始实现玩家的一些一般想法。我还在寻找一种全屏观看视频和移动观看的解决方案。

非常感谢您的输入！

我正在尝试创建类似以下示例的内容：（多个视频播放器线框）：

Answer 1

关于新编辑：

“如何在一个画布上同时全屏显示两个视频？”

这是一个并排显示两个视频的好例子。您必须进行调整（显示宽度和高度），以查看其工作原理。该代码假定这两个视频的宽度均为 640 ，最大高度为 480 （如果高度较小则可以）。因此：

<canvas id="canvas" width="1280" height="600"></canvas>

假设width 640 x 2 videos = 1280;

如果以全屏模式选中，则screen.width会报告当时显示器的全屏宽度。如果要使用各种分辨率，则必须仔细检查纵横比数学。

请查看function on_fullscreen_change()和行 my_canvas.width = screen.width / aspectRatio; ，了解有关计算比率的想法。对其中的一个进行了微调，可播放两个640个视频，因此适合电视屏幕自身1600像素宽度（非HDMI，使用VGA电缆）的1280像素。

代码通常简短而简单。在这里看起来很长，因为它可以处理一些额外的事情（例如 eg：长宽比）：

<!DOCTYPE html>
<html>

<body>

<canvas id="canvas" width="1280" height="600"></canvas>

<br>

<video id="myVid1" width="0" height="0" controls>
<source src="video1.mp4" type="video/mp4">
</video>

<video id="myVid2" width="0" height="0" controls>
<source src="video2.mp4" type="video/mp4">
</video>

</body>


<script>

//# get access to Canvas as "my_canvas"
var my_canvas = document.getElementById("canvas");
var my_ctx = canvas.getContext("2d");

//# starting video width/height values (don't need to be correct)
var vid_A_Width = 0; var vid_A_Height = 0;
var vid_B_Width = 0; var vid_B_Height = 0;

//# ASPECT RATIO (...is calculated further below)
//# new height = (original height / original width) x new width;
var aspectRatio = 0; //(myVid1.videoWidth / myVid1.videoheight).toFixed(3);

myVid1.onloadedmetadata = function() 
{
    //# set width & height according to video file's own metadata

    vid_A_Width = myVid1.videoWidth; vid_A_Height = myVid1.videoHeight;

    myVid2.onloadedmetadata = function() 
    {
        vid_B_Width = myVid2.videoWidth; vid_B_Height = myVid2.videoHeight;
        aspectRatio = (canvas.width / canvas.height);
        //alert( "aspectRatio : " + aspectRatio);
    }
}   

//# listen for full-screen and handle via functions
document.addEventListener('mozfullscreenchange', on_fullscreen_change); //if firefox
document.addEventListener('webkitfullscreenchange', on_fullscreen_change); //if Chrome/Edge/Safari
window.addEventListener('resize', resizeCanvas, false);

//# handle play / pause
function play_pause() 
{
    if (myVid1.paused == true) 
    { 
        myVid1.play(); myVid2.play(); canvas_DrawUpdate();

        //# try available fullscreen modes using "OR" || operator
        my_canvas.requestAnimationFrame(canvas_DrawUpdate)
        //|| mozRequestAnimationFrame (canvas_DrawUpdate)
        //|| webkitRequestAnimationFrame (canvas_DrawUpdate)
        //|| msRequestAnimationFrame (canvas_DrawUpdate)
    }
    else 
    { 
        //myVid1.pause(); myVid2.pause();

        my_canvas.cancelAnimationFrame(canvas_DrawUpdate)
        //|| mozCancelAnimationFrame(canvas_DrawUpdate)
        //|| webkitRequestAnimationFrame (canvas_DrawUpdate)
    }
}

//# handle frame updating within Canvas pixels
function canvas_DrawUpdate()
{
    my_ctx.drawImage(myVid1,0,0,640,480); //draw video A
    my_ctx.drawImage(myVid2,641,0,640,480); //draw video B

    //# feedback loop...
    requestAnimationFrame(canvas_DrawUpdate); //wait for browser to present another animation frame.       
}

//# set Canvas "my_canvas" to full screen
function canvas_Fullscreen()
{
    if ( my_canvas.webkitRequestFullScreen ) { my_canvas.webkitRequestFullScreen(); }
    else { my_canvas.mozRequestFullScreen(); }            
}

//# set width & height according to video file's own metadata
function on_fullscreen_change() 
{
    if(document.mozFullScreen || document.webkitIsFullScreen) 
    {
        vid_A_Width = screen.width; vid_A_Height = screen.height;
        aspectRatio = (screen.width / myVid1.videoWidth) / 2;

        //# use "screen.width divide by aspect ratio" (eg: my_canvas.width = screen.width / 1.333;
        my_canvas.width = screen.width / aspectRatio; //can try: 1.333;
    }
    else 
    {
        my_canvas.width = screen.width;
        //my_canvas.height = ??;
    }
}

</script>



<br><br>

<button onclick="play_pause()"> PLAY/PAUSE </button>

<button onclick="canvas_Fullscreen()"> FULL-SCREEN </button>

</html>

旧答案...

（1）

“我正在尝试创建一个可以同时播放两个视频的视频播放器...”

使用Javascript一次控制两个视频的播放。如果您展示/告诉您如何尝试，我将更新此部分。

（2）：

“仅使用一个视频控制界面...我也希望全屏查看两个视频”

为此，您必须将两个视频（并排）合并为一个最终的MP4视频文件。这样，您将可以控制播放和全屏显示两个“视图”。

这可以使用您最喜欢的视频编辑器工具完成，也可以使用FFmpeg（免费）。

ffmpeg -i vid1.mp4 -i vid2.mp4 -filter_complex "[0:v]pad=iw*2:ih[int];[int][1:v]overlay=W/2:0[myvid]" -map [myvid] -an test_output.mp4

多个视频播放器和带两个视频的全屏画布

1 个答案: