Si è verificato un errore nell'elaborarazione del modello.
The following has evaluated to null or missing:
==> titulo [in template "20907#20945#63144510" at line 43, column 19]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${titulo} [in template "20907#20945#63144510" at line 43, column 17]
----
1<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
2<link href="https://www.gipuzkoa.eus/documents/3767975/33151936/dipu.css" rel="stylesheet" />
3<link href="https://www.gipuzkoa.eus/documents/3767975/33151936/videojs-logo.css" rel="stylesheet" />
4<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
5<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
6<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
7<script src="https://www.gipuzkoa.eus/documents/3767975/33151936/videojs-logo.min.js"></script>
8
9<#if locale.getLanguage()=="es">
10<#assign elige = 'Elige tu webcam' >
11<#assign titulo = 'Webcams' >
12</#if>
13<#if locale.getLanguage()=="fr">
14<#assign elige = 'Choisissez votre webcam' >
15<#assign titulo = 'Webcams' >
16</#if>
17<#if locale.getLanguage()=="en">
18<#assign elige = 'Choose your webcam' >
19<#assign titulo = 'Webcams' >
20</#if>
21<#if locale.getLanguage()=="eu">
22<#assign elige = 'Aukeratu zure webcam-a' >
23<#assign titulo = 'Webcam-ak' >
24</#if>
25
26<#if locale.getLanguage() == 'es'>
27<script src="https://vjs.zencdn.net/8.0.4/lang/es.js"></script>
28<#assign logoEtorkizunaOrain = 'Logo Etorkizuna Orain'>
29<#assign logoForuAldundia = 'Logo Diputación Foral de Gipuzkoa' >
30
31<#else>
32<script src="https://vjs.zencdn.net/8.0.4/lang/eu.js"></script>
33<#assign logoEtorkizunaOrain = 'Etorkizuna Orain logoa'>
34<#assign logoForuAldundia = 'Gipuzkoako Foru Aldundiaren logoa' >
35</#if>
36
37
38<div class="inner-header">
39 <div class="aspect-ratio"><img alt="" src="/documents/20109831/0/cab-webcams.jpg/2a0a276e-a446-de37-f2d2-0310b0567a5d?t=1704886514980" /></div>
40
41 <div class="fila">
42 <div class="columns large-12">
43 <h1>${titulo}</h1>
44 </div>
45 </div>
46</div>
47
48
49<div class="fila">
50 <div class="columns large-12">
51 <img alt="" src="/documents/20109831/0/mapa-playas.jpg/b54ba74a-ddaf-24fc-939f-a94dc7db1024?t=1704886752509" /></div>
52 </div>
53</div>
54<div class="fila">
55 <div class="columns large-12">
56 <h3 style="text-align: center; margin-bottom: 20px; margin-top: 40px;"><img alt="" src="/documents/20109831/0/pico-webcam.jpg/ee1bd565-586b-aaf1-b0a3-3bddb1843362?t=1704887611391" /></h3>
57 <h2 style="text-align: center; text-transform: uppercase; font-size: 30px; font-weight: bold;">${elige}</h2>
58 </div>
59</div>
60
61<div class="fila">
62 <div class="columns large-12">
63 <ul class="listado-webcams" data-playa="${playa.getData()}">
64 <li class="" data-playa="deba01">
65 <a href="/-/deba-webcam" ><strong>DEBA</strong>-SANTIAGO</a>
66 </li>
67 <li class="" data-playa="donostia01">
68 <a href="/-/donostia-concha-webcam"><strong>DONOSTIA / SAN SEBASTIÁN</strong>-LA CONCHA </a>
69 </li>
70 <li class="" data-playa="donostia02">
71 <a href="/-/donostia-ondarreta-webcam"><strong>DONOSTIA / SAN SEBASTIÁN</strong>-ONDARRETA </a>
72 </li>
73 <li class="" data-playa="donostia03">
74 <a href="/-/donostia-zurriola-webcam"><strong>DONOSTIA / SAN SEBASTIÁN</strong>-ZURRIOLA</a>
75 </li>
76 <li class="" data-playa="getaria01">
77 <a href="/-/getaria-webcam"><strong>GETARIA</strong>-MALKORBE </a>
78 </li>
79 <li class="" data-playa="hondarribia01">
80 <a href="/-/hondarribia-webcam"><strong>HONDARRIBIA</strong> </a>
81 </li>
82 <li class="" data-playa="mutriku01">
83 <a href="/-/mutriku-webcam"><strong>MUTRIKU</strong> </a>
84 </li>
85 <li class="" data-playa="mutriku02">
86 <a href="/-/mutriku-saturraran-webcam"><strong>MUTRIKU</strong>-SATURRARAN </a>
87 </li>
88 <li class="" data-playa="orio01">
89 <a href="/-/orio-webcam"><strong>ORIO</strong>-ANTILLA </a>
90 </li>
91 <li class="" data-playa="zarautz01">
92 <a href="/-/zarautz-webcam"><strong>ZARAUTZ</strong></a>
93 </li>
94 <li class="" data-playa="zumaia01">
95 <a href="https://zumaia.eus/eu/turismoa/zumaia-herria/webcam" target="_blank"><strong>ZUMAIA</strong>-ITZURUN</a>
96 </li>
97 </ul>
98 </div>
99</div>
100
101<div class="fila" style="margin-top: 160px!important;">
102 <div class="columns large-8 large-offset-2">
103 <p>
104 <video autoplay="" class="video-js vjs-theme-dipu" controls="true" fluid="true" id="video1" muted="" playsinline="playsinline" preload="auto"><source src="${webcamUrl.getData()}" type="application/x-mpegURL" /></video>
105 </p>
106 <p style="font-size:18px; text-transform: uppercase;">${title.getData()}</p>
107
108 </div>
109</div>
110
111
112<style>
113 .listado-webcams { list-style: none; padding: 0; margin: 20px auto; display: flex; flex-wrap: wrap; justify-content: center; }
114 .listado-webcams li { display: inline-flex; margin: 10px 20px; }
115 .listado-webcams li a { color: #000; transition: all .3s ease; position: relative; }
116 .listado-webcams li a::after { content:""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background-color: #000;}
117 .listado-webcams li a:hover { color: #00588F; }
118 .listado-webcams li a:hover::after { background-color: #00588F;}
119 .listado-webcams li.active a { color: #00588F; pointer-events: none; }
120 .listado-webcams li.active a::after { background-color: #00588F;}
121 .inner-header { margin-bottom: 40px; }
122</style>
123
124
125<script>
126 var myplayer = videojs('video1');
127
128 myplayer.logo({
129 image: "https://www.gipuzkoa.eus/documents/3767975/33151936/logo-player.png",
130 height:50,
131 position:"top-left"
132 });
133
134 var myPlayer = videojs('video1',{
135 controlBar: {
136 children: [
137 "playToggle",
138 "fullscreenToggle",
139 "durationDisplay",
140 "timeDivider",
141 "currentTimeDisplay",
142 "progressControl",
143 "remainingTimeDisplay"
144 ]
145 }
146 });
147
148 videojs.getPlayer('video1').ready(function() {
149 // Create variables and new div, anchor and image for download icon
150 var myPlayer = this,
151 controlBar,
152 newElement = document.createElement('div'),
153 newLink = document.createElement('a'),
154 newImage = document.createElement('img');
155 // Assign id and classes to div for icon
156 newElement.id = 'downloadButton';
157 newElement.className = 'downloadStyle vjs-control';
158 // Assign properties to elements and assign to parents
159 newImage.setAttribute('src','https://www.gipuzkoa.eus/documents/3767975/33151936/logodipu.jpg');
160 newImage.setAttribute('alt','${logoForuAldundia}');
161 newLink.appendChild(newImage);
162 newElement.appendChild(newImage);
163 // Get controlbar and insert before elements
164 // Remember that getElementsByClassName() returns an array
165 controlBar = document.getElementsByClassName('vjs-control-bar')[0];
166 // Change the class name here to move the icon in the controlBar
167 insertBeforeNode = document.getElementsByClassName('vjs-volume-menu-button')[0];
168 // Insert the icon div in proper location
169 controlBar.insertBefore(newElement,insertBeforeNode);
170
171 myPlayer.logo().div.getElementsByTagName("img")[0].alt="${logoEtorkizunaOrain}"
172
173 });
174
175 document.addEventListener('DOMContentLoaded', function() {
176 // Encuentra el elemento UL
177 var ul = document.querySelector('ul.listado-webcams');
178
179 // Obtiene el valor del atributo data del UL
180 var ulDataValue = ul.getAttribute('data-playa');
181
182 // Encuentra todos los elementos LI dentro del UL
183 var lis = ul.querySelectorAll('li');
184
185 // Itera sobre cada LI
186 lis.forEach(function(li) {
187 // Obtiene el valor del atributo data del LI
188 var liDataValue = li.getAttribute('data-playa');
189
190 // Compara los valores data del LI y del UL
191 if (liDataValue === ulDataValue) {
192 // Si coinciden, añade la clase 'active'
193 li.classList.add('active');
194 }
195 });
196});
197
198</script>