当我尝试运行我的代码以在网页上同步视频时出现此错误
这应该做的是同步视频,如果它在多个网页或多个设备上打开,它应该如何工作,所以如果有人可以帮助那将是惊人的谢谢。抱歉,我是sockjs和JavaScript的新手,所以感谢任何帮助
这是完整错误“无法加载资源:net :: ERR_CONNECTION_REFUSED”
这是我的索引:
<!DOCTYPE html>
<html>
<head>
body {
padding: 0px;
margin: 5%;
width: 90%;
}
video {
width: 100%;
}
#volume {
width: 70%;
}
</style>
</head>
<body>
<video id="video" autoplay>
<source src="http://googledrive.com/host/0B-5FC9-wtiZzbTJFQnljdzNDdEE" type="video/mp4"/>
<source src="http://googledrive.com/host/0B-5FC9-wtiZzbTJFQnljdzNDdEE" type="video/webm"/>
</video>
<div>
<label>Volume: </label><input type="range" min="0" max="1" step="0.0001" value="1" id="volume"/>
<button id="mute">Unmute</button>
<button id="play">Play</button>
</div>
<div>Server Time: <span id="clock"></span></div>
<div>Video Time: <span id="video-time"></span></div>
<article>
<h1>Synchronized Video Player</h1>
</article>
<!--<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>-->
<script src="js/lib/sockjs-0.3.min.js"></script>
<script src="js/remote-clock.js"></script>
<script src="js/main.js"></script>
</body>
我的main.js是:
(function (window) {
var CLOCK_PORT = 5001,
EPSILON = -1 / 15,
DURATION = 149.619,
maxOffset = 1 / 30,
video = document.getElementById('video'),
clock = document.getElementById('clock'),
videoTime = document.getElementById('video-time'),
volume = document.getElementById('volume'),
muted = document.getElementById('muted'),
targetTime = 0,
serverUrl,
remoteClock,
durationInMilliseconds,
timeout,
retries = 0,
isBuffered;
function updateClockDisplay() {
clock.textContent = (new Date(remoteClock.time())).toTimeString();
videoTime.textContent = (video.currentTime).toFixed(2);
requestAnimationFrame(updateClockDisplay);
}
function checkAgain(delay) {
clearTimeout(timeout);
timeout = setTimeout(checkSync, delay);
}
function checkSync(evt) {
var currentTime,
current,
currentBuffered,
targetBuffered,
targetDiff,
currentDiff,
skip;
//currentTime is the time we should be at NOW
currentTime = (remoteClock.time() % durationInMilliseconds) / 1000;
//targetTime is the time we're seeking to and want to catch up to later
//it's a little bit ahead of where we are so we can take time to buffer
targetTime = Math.max(targetTime, currentTime);
currentDiff = currentTime - video.currentTime;
current = currentDiff > EPSILON && currentDiff < maxOffset;
targetBuffered = isBuffered(targetTime);
currentBuffered = isBuffered(currentTime) && isBuffered(currentTime + 2);
if (currentBuffered && current) {
video.play();
retries = Math.min(2, retries);
checkAgain(2000);
return;
}
//we missed our window, so seek ahead and try again
if (currentDiff >= EPSILON && video.readyState < 2 || currentDiff > 1) {
skip = Math.pow(2, Math.min(4, Math.max(retries, 1)));
targetTime = (currentTime + skip) % DURATION;
video.pause();
video.currentTime = targetTime;
retries++;
maxOffset = Math.max(maxOffset, retries * 0.1);
checkAgain(1000);
return;
}
//we haven't caught up yet, so give it a little more time to buffer and check in again
targetDiff = targetTime - currentTime;
checkAgain(targetDiff * 500);
}
function stateUpdate(evt) {
if (!video.duration) {
console.log('No video duration yet');
video.pause();
return;
}
console.log('video metadata', video.duration, video.videoWidth, video.videoHeight);
durationInMilliseconds = Math.round(DURATION * 1000);
if (remoteClock.accuracy() > 100) {
return;
}
checkSync(evt || 'clock update');
}
function timeBuffered(time) {
var i;
if (!video.buffered) {
return true;
}
for (i = 0; i < video.buffered.length; i++) {
if (video.buffered.start(i) > time) {
return false;
}
if (video.buffered.end(i) >= time) {
return true;
}
}
return false;
}
/*
This runs whenever either the clock accuracy changes or the video duration changes.
*/
if (!video.buffered || 'mozId' in navigator) {
isBuffered = function (time) {
return (time - video.currentTime < 5) && video.readyState >= 3 || timeBuffered(time);
};
} else {
isBuffered = timeBuffered;
}
serverUrl = location.protocol + '//' + location.hostname + ':' + CLOCK_PORT + '/time-server';
remoteClock = new RemoteClock(serverUrl, stateUpdate);
video.muted = true;
video.addEventListener('durationchange', stateUpdate, false);
//video.addEventListener('waiting', stateUpdate, false);
//video.addEventListener('seeked', stateUpdate, false);
video.addEventListener('volumechange', function () {
volume.value = video.volume;
if (video.muted) {
mute.textContent = 'Unmute';
} else {
mute.textContent = 'Mute';
}
});
mute.addEventListener('click', function () {
video.muted = !video.muted;
});
volume.addEventListener('input', function () {
video.volume = volume.value;
});
play.addEventListener('click', function () {
if (video.paused) {
play.textContent = 'Play';
video.play();
} else {
play.textContent = 'Pause';
video.pause();
}
});
window.addEventListener('touchstart', function touchstart(evt) {
video.load();
evt.preventDefault();
window.removeEventListener('touchstart', touchstart, true);
}, true);
updateClockDisplay(); }(this));
我的remote-clock.js是:
(function (window) {
function RemoteClock(server, callback) {
var synced = false,
done = false,
socket,
minDiff = Infinity,
maxDiff = -Infinity,
accuracy = Infinity,
timingDiff = 0;
function onMessage(evt) {
var clientReceived,
improved = 0,
acc;
if (!evt.data) {
return;
}
var message = JSON.parse(evt.data);
console.log('message', message);
clientReceived = Date.now();
if (message.timing !== undefined) {
minDiff = Math.min(minDiff, clientReceived - message.timing);
if (minDiff !== undefined) {
if (message.maxDiff !== undefined) {
maxDiff = message.maxDiff;
timingDiff = minDiff + (maxDiff - minDiff) / 2;
acc = Math.abs(maxDiff - minDiff);
improved = accuracy - acc;
accuracy = acc;
console.log('remote clock', Date.now() - timingDiff, timingDiff, accuracy);
if (acc < 200) {
if (!synced) {
synced = true;
//todo: fire callback
}
if (acc < 50) {
done = true;
}
}
if ((improved >= 10 || done) && callback) {
callback();
}
} else {
timingDiff = minDiff;
}
}
}
}
function requestTiming() {
socket.send(JSON.stringify({
action: 'sync',
minDiff: minDiff,
timing: Date.now()
}));
if (!done) {
setTimeout(requestTiming, 1000);
}
}
if (!window.SockJS) {
throw new Error('Unable to initialize RemoteSync. Missing SockJS');
}
socket = new SockJS(server || location.origin);
socket.onmessage = onMessage;
socket.onopen = requestTiming;
this.time = function () {
return Date.now() - timingDiff;
};
this.accuracy = function () {
return accuracy;
};
}
window.RemoteClock = RemoteClock; }(this));
和我的time-server.js是:
var server,
app,
http = require('http'),
SockJS = require('sockjs'),
socket,
server;
//socket = require('socket.io')(5001);
socket = SockJS.createServer();
socket.on('connection', function(client) {
'use strict';
function max(a, b) {
return a !== undefined && a > b ? a : b;
}
function onMessage(data){
var serverReceived;
if (!data) {
return;
}
var message = JSON.parse(data);
console.log(client.id + ': ' + (typeof message) + ': ' + JSON.stringify(message));
//diff = (client clock - server clock) milliseconds
serverReceived = Date.now();
if (message.timing !== undefined) {
client.maxDiff = max(client.maxDiff, message.timing - serverReceived);
client.write(JSON.stringify({
maxDiff: client.maxDiff,
timing: Date.now()
}));
if (client.maxDiff !== undefined) {
if (message.minDiff !== undefined) {
client.minDiff = message.minDiff;
client.timingDiff = client.minDiff + (client.maxDiff - client.minDiff) / 2;
} else {
client.timingDiff = client.maxDiff;
}
}
}
}
if (!client) {
console.log('no client!');
return;
}
if (client.remoteAddress) {
console.log('client connected. ' + client.id + ' (' + client.remoteAddress + ':' + client.remotePort + ')');
} else {
console.log('client connected. ' + client.id);
}
//console.log('properties', JSON.stringify(properties, null, 4));
//client.json.send(properties);
//client.on('message', onMessage);
client.on('data', onMessage);
/*
client.on('disconnect', function(){
//delete clients[client.id];
client.removeListener('message', onMessage);
});
*/
});
var server = http.createServer();
socket.installHandlers(server, {prefix:'/time-server'});
server.listen(5001);
我无法让代码格式化抱歉