https://biblewebapp.com/study-v2/js/docs/plugins.videolibrary.js

1/**
2 * Shows videos for verses
3 * HARDCODED URLS: We don't know what languages, versions, etc. will be availble so this only makes the icons and player work.
4 *
5 * @author John Dyer (http://j.hn/)
6 */
7 
8docs.plugins.push({
9
10	init: function( docManager ) { 
11				
12		if (!docs.Features.hasTouch) {
13			
14			var
15				chaptersAwaiting = [];
16
17			// create media popup
18			var
19				width = 640,
20				height = 360,
21				popup = docs.createModal('video-player', docs.Localizer.get('plugin_video_title')).size(width+14,height+36).center(),
22				playerid = 'player1',
23				player = null,
24				currentUrls = '';
25				
26			popup.content.css('padding', 0);
27				
28			function playUrl(urls) {
29				
30				if (player != null) {
31					if (currentUrls == urls) {
32						//player.setCurrentTime(0);
33						player.play();
34					} else {
35						player.setSrc(urls);
36						player.load();
37						player.play();
38					}
39					
40					currentUrls = urls;
41				}				
42			}
43 
44			// click an image in the media popup
45			popup.content.html('<video id="' + playerid + '" width="' + width.toString() + '" height="' + height.toString() + '" style="width:100%; height:100%;"></video>');
46			
47			// setup events to add media icons
48			docManager.addEventListener('load', function(e) {
49				addVideoIcons(e.chapter);
50			});
51			
52			// add option
53			docManager.createOptionToggle(docs.Localizer.get('plugin_config_option_video'), 'video', true);			
54			
55			function addVideoIcons(chapter) {
56				
57				if (typeof videoLibrary == 'undefined') {
58					if (chaptersAwaiting != null) {
59						console.log('storing', chapter);
60						chaptersAwaiting.push(chapter);
61					}
62						
63				} else {
64					
65					chapter.find('.verse').each(function(index, verseNode) {
66						
67						// find verse and look for images
68						var verse = $(verseNode),
69							verseId = verse.attr('data-osis'),
70							videos = videoLibrary[verseId];
71						
72						// if we have images, then insert the icon	
73						if (typeof videos != 'undefined') {
74							var videosIcon = $('<span class="video-icon inline-icon"></span>').appendTo(verse);
75						}
76						
77					});
78					
79					chapter.on('click', '.video-icon', function() {		
80						var
81							canPlayMP4 = (typeof document.createElement("video").canPlayType === "function" && document.createElement("video").canPlayType("video/mp4") !== ""),
82							videoIcon = $(this),
83							verse = videoIcon.closest('.verse'),
84							verseOsis = verse.attr('data-osis'),
85							reference = new bible.Reference(verseOsis).toString(),
86							videoIndex = videoLibrary[verseOsis],
87							//videoUrl = 'content/videos/' + videoIndex + '.mp4';
88							videoSrc = [
89										{type: 'video/mp4', src: 'content/videos/' + videoIndex + '.mp4'}
90									   ];
91						if (canPlayMP4) {
92						popup.title.html('Video: ' + reference.toString());	
93						popup.center().show();
94						
95						if (player != null) {
96							
97							playUrl(videoSrc);
98						} else {
99							
100							$('#' + playerid).mediaelementplayer({type:['video/mp4'], success: function(m, n, p) {
101								player = p;
102								playUrl(videoSrc);
103							}});
104							
105						}
106						
107					} else {
108						$('.popup-content').empty();
109						popup.title.html('Video: ' + reference.toString());	
110						popup.center().show();
111						$('.popup-content').append('<object id="flashplayer" type="application/x-shockwave-flash" data="js/docs/player.swf" width="100%" height="100%"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="flashvars" value="file=content/videos/ar/' + videoIndex + '.mp4"></object>');
112					}
113					});
114				}
115			}
116			
117			popup.close.on('click', function() {
118				player.pause();
119			});			
120			
121			$.ajax({
122				url: 'content/videos/videos.js',
123				dataType: 'script',
124				success: function() {
125					
126					while (chaptersAwaiting.length > 0) {
127						var chapter = chaptersAwaiting.pop();
128						addVideoIcons(chapter);
129					}
130				},
131				error: function() {
132					console.log('ERROR: loading videos');
133					chaptersAwaiting = null;
134				}
135			});			
136			
137		}
138	}
139});