Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 1x 2x 10x 10x 2x 8x 4x 4x 8x 4x 8x 2x 10x 10x 2x 8x 4x 8x 4x 4x 4x 8x 8x 8x 1x 5x 5x 5x 1x 2x 1x 9x 6x 3x 3x 3x 3x 1x 87x 87x 70x 17x 17x 17x 3x 1x 2x 17x 8x 8x 9x 9x 9x 9x 9x 9x 9x 3x 3x 1x 3x 6x 1x 5x 1x 4x 9x 9x 6x 6x 4x 6x 6x | import Frozen from "./Frozen.js";
import defined from "./defined.js";
import destroyObject from "./destroyObject.js";
import Iso8601 from "./Iso8601.js";
import JulianDate from "./JulianDate.js";
/**
* Synchronizes a video element with a simulation clock.
*
* @alias VideoSynchronizer
* @constructor
*
* @param {object} [options] Object with the following properties:
* @param {Clock} [options.clock] The clock instance used to drive the video.
* @param {HTMLVideoElement} [options.element] The video element to be synchronized.
* @param {JulianDate} [options.epoch=Iso8601.MINIMUM_VALUE] The simulation time that marks the start of the video.
* @param {number} [options.tolerance=1.0] The maximum amount of time, in seconds, that the clock and video can diverge.
*
* @demo {@link https://sandcastle.cesium.com/index.html?src=Video.html|Video Material Demo}
*/
function VideoSynchronizer(options) {
options = options ?? Frozen.EMPTY_OBJECT;
this._clock = undefined;
this._element = undefined;
this._clockSubscription = undefined;
this._seekFunction = undefined;
this._lastPlaybackRate = undefined;
this.clock = options.clock;
this.element = options.element;
/**
* Gets or sets the simulation time that marks the start of the video.
* @type {JulianDate}
* @default Iso8601.MINIMUM_VALUE
*/
this.epoch = options.epoch ?? Iso8601.MINIMUM_VALUE;
/**
* Gets or sets the amount of time in seconds the video's currentTime
* and the clock's currentTime can diverge before a video seek is performed.
* Lower values make the synchronization more accurate but video
* performance might suffer. Higher values provide better performance
* but at the cost of accuracy.
* @type {number}
* @default 1.0
*/
this.tolerance = options.tolerance ?? 1.0;
this._seeking = false;
this._seekFunction = undefined;
this._firstTickAfterSeek = false;
}
Object.defineProperties(VideoSynchronizer.prototype, {
/**
* Gets or sets the clock used to drive the video element.
*
* @memberof VideoSynchronizer.prototype
* @type {Clock}
*/
clock: {
get: function () {
return this._clock;
},
set: function (value) {
const oldValue = this._clock;
if (oldValue === value) {
return;
}
if (defined(oldValue)) {
this._clockSubscription();
this._clockSubscription = undefined;
}
if (defined(value)) {
this._clockSubscription = value.onTick.addEventListener(
VideoSynchronizer.prototype._onTick,
this,
);
}
this._clock = value;
},
},
/**
* Gets or sets the video element to synchronize.
*
* @memberof VideoSynchronizer.prototype
* @type {HTMLVideoElement}
*/
element: {
get: function () {
return this._element;
},
set: function (value) {
const oldValue = this._element;
if (oldValue === value) {
return;
}
if (defined(oldValue)) {
oldValue.removeEventListener("seeked", this._seekFunction, false);
}
if (defined(value)) {
this._seeking = false;
this._seekFunction = createSeekFunction(this);
value.addEventListener("seeked", this._seekFunction, false);
}
this._element = value;
this._seeking = false;
this._firstTickAfterSeek = false;
},
},
});
/**
* Destroys and resources used by the object. Once an object is destroyed, it should not be used.
*
* @exception {DeveloperError} This object was destroyed, i.e., destroy() was called.
*/
VideoSynchronizer.prototype.destroy = function () {
this.element = undefined;
this.clock = undefined;
return destroyObject(this);
};
/**
* Returns true if this object was destroyed; otherwise, false.
*
* @returns {boolean} True if this object was destroyed; otherwise, false.
*/
VideoSynchronizer.prototype.isDestroyed = function () {
return false;
};
VideoSynchronizer.prototype._trySetPlaybackRate = function (clock) {
if (this._lastPlaybackRate === clock.multiplier) {
return;
}
const element = this._element;
try {
element.playbackRate = clock.multiplier;
} catch (error) {
// Seek manually for unsupported playbackRates.
element.playbackRate = 0.0;
}
this._lastPlaybackRate = clock.multiplier;
};
VideoSynchronizer.prototype._onTick = function (clock) {
const element = this._element;
if (!defined(element) || element.readyState < 2) {
return;
}
const paused = element.paused;
const shouldAnimate = clock.shouldAnimate;
if (shouldAnimate === paused) {
if (shouldAnimate) {
element.play();
} else {
element.pause();
}
}
//We need to avoid constant seeking or the video will
//never contain a complete frame for us to render.
//So don't do anything if we're seeing or on the first
//tick after a seek (the latter of which allows the frame
//to actually be rendered.
if (this._seeking || this._firstTickAfterSeek) {
this._firstTickAfterSeek = false;
return;
}
this._trySetPlaybackRate(clock);
const clockTime = clock.currentTime;
const epoch = this.epoch ?? Iso8601.MINIMUM_VALUE;
let videoTime = JulianDate.secondsDifference(clockTime, epoch);
const duration = element.duration;
let desiredTime;
const currentTime = element.currentTime;
if (element.loop) {
videoTime = videoTime % duration;
if (videoTime < 0.0) {
videoTime = duration - videoTime;
}
desiredTime = videoTime;
} else if (videoTime > duration) {
desiredTime = duration;
} else if (videoTime < 0.0) {
desiredTime = 0.0;
} else {
desiredTime = videoTime;
}
//If the playing video's time and the scene's clock time
//ever drift too far apart, we want to set the video to match
const tolerance = shouldAnimate ? (this.tolerance ?? 1.0) : 0.001;
if (Math.abs(desiredTime - currentTime) > tolerance) {
this._seeking = true;
element.currentTime = desiredTime;
}
};
function createSeekFunction(that) {
return function () {
that._seeking = false;
that._firstTickAfterSeek = true;
};
}
export default VideoSynchronizer;
|