How to play two Youtube videos in sync in PHP?

When page load One video is already played Having button show lyrics video,

Once user click lyrics video button show the Lyrics youtube video at the same page.

1. Now two Youtube videos play sync and automatically play Lyrics video is muted.

2. Once one Youtube video is Pause automatically other video too paused.

3. Once one Youtube video is Play automatically other video too Play.

Is it possible Done in php/JS my above scenario.

Once Possible Please give me solution.
Geeth JanarthananAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
This can be done in JavaScript / jQuery

For <video> elements
<video src="video1.mp4" id="video1"></video>
<video src="video2.mp4" id="video2"></video>
<button id="pause">Pause</button>
<script>
var v1 = document.getElementById('video1');
var v2 = document.getElementById('video2');
document.getElementById('pause').onclick = function() {
   v1.pause();
   v2.pause();
};
</script>

Open in new window

For YouTube
<div id="ytplayer1"></div>
<div id="ytplayer2"></div>
<button id="pause">Pause</button> 
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytplayer1, ytplayer2;
function onYouTubePlayerAPIReady() {
    ytplayer1 = new YT.Player('ytplayer1', {
        height: '480',
        width: '640',
        videoId: 'YT-ID-1',
    });

    ytplayer2 = new YT.Player('ytplayer2', {
        height: '480',
        width: '640',
        videoId: 'YT-ID-2',
    });
    document.getElementById('pause').onclick = function() {
        ytplayer1.pauseVideo();
        ytplayer2.pauseVideo();
    };
}
</script>

Open in new window

2

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Keep in mind, you can only start two videos simultaneously.

This means they will start out in sync + desync over time. The longer they play, the more pronounced the desync.

The easy way to maintain 100% sync over entire span of videos is to transcode them together as an over-under or side-by-side video. This will cause both videos to play with the exact same clock.
0
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Poster has stopped posting.

Julian's answer seems best.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.