VideoLoop/VideoLoop.js at master · westguard/VideoLoop · GitHub

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
//
//	VideoLoop.js - Provides (almost) seamless video looping and overcomes HTML 5 video loop attribute pause
//	By Mark Westguard (http://www.westguardsolutions.com)
//

function VideoLoop(id) {

	var about = {

		Version: 0.1,
		Author: "Mark Westguard",
		Created: "09/01/2015",
		Updated: "09/02/2015"
	};

	if(id) {

		if(window === this) { return new VideoLoop(id); }

		// Configuration
		this.length = 1000;			// Precise (as you can) length of video in milliseconds
		this.zIndex = 10000;		// Z-Index of video (z-index of +1 and -1 this value will also be used)
		this.transitionDelay = 500;	// Video transition delay
		this.paths = [];
		this.types = [];

		// Variables
		this.id = id;
		this.idCurrent = 1;			// Current video playing
		this.step = 0;				// Loading step

		return this;

	} else {

		return about;
	}
}

VideoLoop.prototype = {

	// Initialize
	init: function() {

		// Create 2 videos
		for(var i=1; i<=2; i++) {

			this.create(document.getElementById(this.id), this.id, i);
		}
	},

	// Check if all checks are complete
	check: function(obj, id) {

		// Increment video steps
		obj.step++;

		// When all four conditions are met, start playing video 1
		if(obj.step == 4) { document.getElementById(id + '1').play(); }
	},

	play: function(id) {

		// Work out alternate video object
		this.idCurrent = (((this.idCurrent - 2) * -1) + 1);
		var idCurrentAlt = (((this.idCurrent - 2) * -1) + 1);

		// Work out video objects
		obj1 = document.getElementById(id + this.idCurrent);
		obj2 = document.getElementById(id + idCurrentAlt);

		// Play video (But do not show it yet)
		obj1.play();

		// ... then after transition delay ...
		_self = this;
		setTimeout(function() {

			// Video transition
			obj2.style.zIndex = _self.zIndex - 1;		// Move alt video to position -1 (Behind video 1)
			obj1.style.zIndex = _self.zIndex + 1;		// Move video to position 1
			obj2.style.zIndex = _self.zIndex;			// Move alt video to position 0 ready for next transition

			// Set up video 2 ready to play
			obj2.pause();
			obj2.currentTime = 0;

		}, this.transitionDelay);
	},

	create: function(obj, id, index) {

		// Create video object
		var videoObj = document.createElement('video');
		videoObj.id = id + index;

		// Create video source(s)
		for(var i=0; i<this.paths.length; i++) {

			var videoObjSource = document.createElement('source');
			videoObjSource.src = this.paths[i];
			videoObjSource.type = this.types[i];
			videoObj.appendChild(videoObjSource);
		}

		// On can play through event handler
		videoObj.oncanplaythrough = this.check(this, id);		// Video step

		// Loaded meta data event handler
		videoObj.loadedmetadata = this.check(this, id);		// Video step

		// Video playing event handlers
		videoObj.videoLoopSelf = this;
		videoObj.videoLoopID = id;
		videoObj.addEventListener('playing', function(evt) {

			_self = evt.target.videoLoopSelf;
			id = evt.target.videoLoopID;

			setTimeout(function() {

				_self.play(id);

			}, _self.length);

		}, false);

		// Set initial z-index
		videoObj.style.zIndex = this.zIndex + (2 - index);

		// Append video to videoloop object
		obj.appendChild(videoObj);
	}
};