Относительно нового редактирования:
"Как я могу отобразить два видео в полноэкранном режиме на одном холсте одновременно?"
Вот хороший пример показа двух видео рядом.Вы должны будете настроить вещи (отображать ширину и высоту), чтобы увидеть, как все это работает.Код предполагает, что оба видео имеют ширину шириной 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, поэтому он умещается в 1280 пикселей на собственной ширине экрана моего телевизора 1600 пикселей (без HDMI, с использованием кабеля VGA).
Код, как правило, короткий и простой.Здесь он выглядит длинным, потому что он заботится о некоторых дополнительных вещах ( например: соотношение сторон):
<!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