• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 80
  • Last Modified:

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.
0
Geeth Janarthanan
Asked:
Geeth Janarthanan
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now