Adicionado suporte ao Safari.

Adabriand Furtado
1 parent da8e8094
Showing 3 changed files with 38 additions and 8 deletions Show diff stats
view/js/helpers/video-helper.js
view/js/validador.js
view/templates/index.html
@@ -0,0 +1,31 @@
+(function(videoHelper, $, undefined) {
+
+	function _getSource(videoBaseUrl) {
+		return '<source src="' + videoBaseUrl + '.webm" type="video/webm">'
+				+ '<source src="' + videoBaseUrl
+				+ '.mp4" type="video/mp4">Sem suporte a vídeos';
+	}
+
+	function _controlVideo(elId, toPlay) {
+		if ($(elId).length === 0)
+			return;
+		if (toPlay) {
+			$(elId).get(0).play();
+		} else {
+			$(elId).get(0).pause();
+		}
+	}
+
+	videoHelper.play = function(elId) {
+		_controlVideo(elId, true);
+	};
+
+	videoHelper.pause = function(elId) {
+		_controlVideo(elId, false);
+	};
+
+	videoHelper.getSource = function(videoBaseUrl) {
+		return _getSource(videoBaseUrl);
+	};
+
+}(window.videoHelper = window.videoHelper || {}, jQuery));
@@ -219,11 +219,11 @@
 	function _loadTaskInfo(task) {
 		currentTaskId = task.id;
 		var signName = task.info.sign_name;
-		var avatarVidLink = videosUrl + signName + '_AVATAR.webm';
-		var refVidLink = videosUrl + signName + '_REF.webm';
+		var baseAvatarVidUrl = videosUrl + signName + '_AVATAR';
+		var baseRefVidUrl = videosUrl + signName + '_REF';
 		$('.sign-label').text(signName);
-		$('#avatar-video').attr('src', avatarVidLink);
-		$('#ref-video').attr('src', refVidLink);
+		$('#avatar-video').html(videoHelper.getSource(baseAvatarVidUrl));
+		$('#ref-video').html(videoHelper.getSource(baseRefVidUrl));
 	}
 	function _loadMainComponents() {
@@ -3,6 +3,7 @@
 <script src="{{ server }}/js/external-libs/js.cookie.js"></script>
 <script src="{{ server }}/js/helpers/pybossa-api-helper.js"></script>
 <script src="{{ server }}/js/helpers/load-html-helper.js"></script>
+<script src="{{ server }}/js/helpers/video-helper.js"></script>
 <script src="{{ server }}/js/ranking.js"></script>
 <script src="{{ server }}/js/validador.js"></script>
@@ -47,9 +48,8 @@
 					</h6>
 				</div>
 				<div class="row">
-					<video id="avatar-video" src="" preload="metadata"
+					<video id="avatar-video" preload="metadata"
 						class="video-body" autoplay loop controls>
-						<source type="video/webm">
 					</video>
 				</div>
 				<div id="avatar-radio-answers" class="row radio-options">
@@ -77,9 +77,8 @@
 					</h6>
 				</div>
 				<div class="row">
-					<video id="ref-video" src="" preload="metadata" class="video-body"
+					<video id="ref-video" preload="metadata" class="video-body"
 						autoplay loop controls>
-						<source type="video/webm">
 					</video>
 				</div>
 				<div id="ref-radio-answers" class="row radio-options">
@@ -0,0 +1,31 @@		@@ -0,0 +1,31 @@
	1	+(function(videoHelper, $, undefined) {
	2	+
	3	+ function _getSource(videoBaseUrl) {
	4	+ return '<source src="' + videoBaseUrl + '.webm" type="video/webm">'
	5	+ + '<source src="' + videoBaseUrl
	6	+ + '.mp4" type="video/mp4">Sem suporte a vídeos';
	7	+ }
	8	+
	9	+ function _controlVideo(elId, toPlay) {
	10	+ if ($(elId).length === 0)
	11	+ return;
	12	+ if (toPlay) {
	13	+ $(elId).get(0).play();
	14	+ } else {
	15	+ $(elId).get(0).pause();
	16	+ }
	17	+ }
	18	+
	19	+ videoHelper.play = function(elId) {
	20	+ _controlVideo(elId, true);
	21	+ };
	22	+
	23	+ videoHelper.pause = function(elId) {
	24	+ _controlVideo(elId, false);
	25	+ };
	26	+
	27	+ videoHelper.getSource = function(videoBaseUrl) {
	28	+ return _getSource(videoBaseUrl);
	29	+ };
	30	+
	31	+}(window.videoHelper = window.videoHelper \|\| {}, jQuery));