play same video at the same time, but out of sync in Safari

Question

Created Aug ’20

Replies 1

Boosts 0

Participants 1

I embed two video in the HTML, and set the same currentTime then call play at the same time。but they all always out of sync 。

Code Block HTML<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
		<div id="app">
				<nav>
						<button type="button" onclick="onPlay()">play</button>
						<button type="button" onclick="onSync()">set same currentTime</button>
						<button type="button" onclick="onDiffSync()">set diff currentTime</button>
				</nav>
				<video src="http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4" controls preload="auto" width="300" muted id="video1"></video>
				<video src="http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4" controls preload="auto" width="300" muted id="video2"></video>
		</div>
		<script>
				var video1 = document.getElementById('video1');
				var video2 = document.getElementById('video2');
				function onPlay() {
						video1.play();
						video2.play();
						setTimeout(() => {
								console.log('video1.currentTime:',video1.currentTime, 'video2.currentTime:', video2.currentTime);
						}, 1000);
				}
				function onSync() {
						console.log('video1.currentTime:',video1.currentTime, 'video2.currentTime:', video2.currentTime);
						video1.currentTime = 1;
						video2.currentTime = 1;
						video1.play();
						video2.play();
						console.log('video1.currentTime:',video1.currentTime, 'video2.currentTime:', video2.currentTime);
						setTimeout(() => {
								console.log('video1.currentTime:',video1.currentTime, 'video2.currentTime:', video2.currentTime);
						}, 1000);
				}
				function onDiffSync() {
						console.log('video1.currentTime:',video1.currentTime, 'video2.currentTime:', video2.currentTime);
						var diff = video1.currentTime - video2.currentTime;
						console.log('diff:', diff);
						if (diff < 0) {
								video1.currentTime = 1;
								video2.currentTime = 1 + diff;
						} else if (diff > 0) {
								video1.currentTime = 1 + diff;
								video2.currentTime = 1;
						} else {
								video1.currentTime = 1;
								video2.currentTime = 1;
						}
						setTimeout(() => {
								console.log('video1.currentTime:',video1.currentTime, 'video2.currentTime:', video2.currentTime);
						}, 1000);
				}
		</script>
</body>
</html>

Boost

Answer 1

czonechan OP

Aug ’20

add additional information：

when I use localhost domain the currentTime diff is 0.1 s,but use ip or other domain diff is 0.01 s。it's amazing

0