templates/frontend/default/video.html.twig line 1

Open in your IDE?
  1. <style>
  2. .modal {
  3. background-color: rgba(0, 0, 0, .7);
  4. }
  5. .fade:not(.show) {
  6. opacity: 1;
  7. }
  8. .modal-content {
  9. background-image: unset;
  10. background-color: unset;
  11. background-clip: unset;
  12. position: relative;
  13. -webkit-background-clip: padding-box;
  14. background-clip: padding-box;
  15. border-radius: 15px;
  16. outline: 0;
  17. color: white;
  18. background-color: transparent;
  19. }
  20. .modal-header {
  21. color: white;
  22. text-shadow: black 0.1em 0.1em 0.2em;
  23. padding-bottom: 0;
  24. border: none;
  25. }
  26. .modal-footer{
  27. border-top: none;
  28. }
  29. .modal-backdrop {
  30. display: none;
  31. }
  32. .modal-body {
  33. padding: 0;
  34. margin-bottom: 5%;
  35. }
  36. #video-container{
  37. top: 47vw;
  38. left: 51%;
  39. width: 77%;
  40. transform: translate(-50%, -50%);
  41. position: absolute;
  42. }
  43. .video-timer {
  44. margin: auto;
  45. top: 80%;
  46. left: 50%;
  47. width: 80%;
  48. transform: translate(-50%, -50%);
  49. position: absolute;
  50. font-size: 16px;
  51. color: #FFFFFF;
  52. display: none;
  53. }
  54. #video_overlays{
  55. position: absolute;
  56. background-color: rgba(0, 0, 0, 0.5);
  57. z-index: 2;
  58. left: 0;
  59. right: 0;
  60. top: 0;
  61. bottom: 0;
  62. display: -webkit-flex;
  63. display: flex;
  64. align-items: center;
  65. justify-content: center;
  66. }
  67. #myProgress {
  68. margin: auto;
  69. border-radius: 10px;
  70. top: 75vw;
  71. left: 51%;
  72. width: 77%;
  73. transform: translate(-50%, -50%);
  74. position: absolute;
  75. }
  77. .bar-base {
  78. width: 100%;
  79. height: 15px;
  80. background-image:url('{{ asset('images/loadbar_bg.png') }}');
  81. background-size: 100%;
  82. background-repeat: no-repeat;
  83. border-radius: 10px;
  84. position: relative;
  85. }
  86. #bar {
  87. width: 0%;
  88. height: 15px;
  89. background-image:url('{{ asset('images/loadbar.png') }}');
  90. background-size: 100% 80%;
  91. background-repeat: no-repeat;
  92. border-radius: 10px;
  93. position: absolute;
  94. left: 4px;
  95. }
  96. .video-frame {
  97. min-height: 260px;
  98. }
  99. .frame{
  100. width: 95%
  101. }
  102. .close{
  103. background-color: transparent;
  104. top: 18%;
  105. right: 7%;
  106. z-index: 100;
  107. position: absolute;
  108. border: none;
  109. width: 8% !important;
  110. }
  111. #videoComfirmBtn{
  112. width: 60%;
  113. position: absolute;
  114. bottom: 4vw;
  115. left: 21%;
  116. }
  117. </style>
  118. <script>
  119. function gtag_action_watchVideo(result){
  120. gtag('event', 'video watch', {
  121. 'event_category': '{{ custom_data }}',
  122. 'event_label': result
  123. });
  124. }
  125. </script>
  126. <script>
  127. function reflash(){
  128. pauseVid();
  129. console.log('test');
  130. window.location.href = "{{ path('game_pre_checkAgent', {'language': app.request.locale}) }}";
  131. }
  132. function videoView() {
  133. //pauseVid();
  134. vid = document.getElementById("myVideo");
  136. if (remaingTime >= {{ video_time }}) {
  137. let countdown = vid.duration - vid.currentTime;
  139. $.post("{{ path('api_resign_mission', {'language': app.request.locale}) }}", {"jwt": jwt},
  140. function (data, status) {
  141. if (data.result == 'success') {
  142. //$("#modal_message_success").html(data.message);
  143. //$('#myModal_success').modal('show');
  144. //refresh();
  145. }
  146. else if (data.result == 'fail') {
  147. if (data.action == 'retry') {
  148. $("#modal_message").html(data.message);
  149. $('#myModal_message').modal('show');
  150. }
  151. else if (data.action == 'login') {
  152. window.location.href = "{{ path('game_pre_checkAgent', {'language': app.request.locale}) }}";
  153. }
  154. }
  155. });
  156. }
  157. }
  158. $(function () {
  159. $(document).on('hide.bs.modal', '.modal', function () {
  160. if (typeof vid !== 'undefined') {
  161. closeVideoDiv();
  162. }
  163. });
  164. });
  165. let is_embeded = false;
  166. let starttime = 0;
  167. let remaingTime = 15;
  168. let refreshIntervalId = null;
  170. function playVid() {
  171. if (!vid.paused) {
  172. vid.pause();
  173. } else {
  174. vid.play();
  175. //gtag_action_StartVideo(videoURL);
  176. }
  177. }
  178. function pauseVid() {
  179. vid.pause();
  180. }
  181. function closeVideoDiv() {
  183. if (!vid.paused) {
  184. vid.pause();
  185. }
  186. }
  187. function embedVideo() {
  188. gtag_action_watchVideo('success');
  189. is_embeded = false;
  190. starttime = 0;
  191. remaingTime = 0;
  192. refreshIntervalId = null;
  194. if (is_embeded === false) {
  195. videoURL = '{{ asset('/video/~video_link~') }}';
  198. videoembed = '<div id="video_overlays"><img src="{{ asset('images/play_button.png') }}" style="width: 35%;"/></div><video id="myVideo" width="100%" height="auto" webkit-playsinline="true" playsinline="true" > <source src="{{ asset('video/' ~ video_link) }}" type="video/mp4">Your browser does not support HTML5 video. </video>';
  199. document.getElementById('video-container').innerHTML = videoembed;
  200. document.getElementById("myVideo").controls = true;
  201. document.getElementById("myVideo").load();
  202. vid = document.getElementById("myVideo");
  203. is_embeded = true;
  204. document.getElementById("timer-div").innerHTML = "{{ 'video.countdown' | trans }}" + {{ video_time }};
  205. document.getElementById("bar").style.width = "0%";
  207. $("#videoComfirmBtn").attr('disabled', true);
  208. document.getElementById("videoComfirmBtn").style.visibility = "hidden";
  210. $("#close").attr('disabled', false);
  211. document.getElementById("close").style.visibility = "visible";
  214. let timer = null;
  216. function updateTimeLable() {
  217. remaingTime = Math.floor(remaingTime + 1);
  218. if (remaingTime < {{ video_time }}) {
  219. document.getElementById("timer-div").innerHTML = "{{ 'video.countdown' | trans }}" + remaingTime;
  220. document.getElementById("bar").style.width = ((remaingTime / {{ video_time }})*98) + "%";
  221. }
  222. else {
  223. if (remaingTime == {{ video_time }})
  224. {
  225. document.getElementById("timer-div").innerHTML = "{{ 'video.countdown' | trans }}" + remaingTime;
  226. document.getElementById("bar").style.width = 98 + "%";
  227. }
  229. $("#videoComfirmBtn").attr('disabled', false);
  230. document.getElementById("videoComfirmBtn").style.display = "inline-block";
  231. document.getElementById("videoComfirmBtn").style.visibility = "visible";
  232. videoView();
  234. $("#close").attr('disabled', true);
  235. document.getElementById("close").style.visibility = "hidden";
  237. clearInterval(refreshIntervalId);
  238. }
  240. }
  242. vid.addEventListener("pause", function () {
  243. clearInterval(refreshIntervalId);
  244. $('#video_overlays').show();
  245. });
  247. vid.addEventListener("ended", function () {
  249. if (remaingTime >= 28) {
  250. $("#videoComfirmBtn").attr('disabled', false);
  251. document.getElementById("videoComfirmBtn").style.display = "inline-block";
  252. }
  253. });
  256. vid.addEventListener("play", function () {
  258. if (starttime == 0) {
  259. refreshIntervalId = setInterval(updateTimeLable, 1000);
  260. }
  261. else {
  262. refreshIntervalId = setInterval(updateTimeLable, 1000);
  263. }
  265. $('#video_overlays').hide();
  266. });
  268. }
  269. var myModal_mission_start = $('#myModal_video').offset().top;
  270. var headerOffset = 0; // Adjust this value based on your header height
  271. $('html, body').animate({
  272. scrollTop: myModal_mission_start - headerOffset
  273. }, 500);
  274. }
  275. </script>
  276. <div class="modal fade" id="myModal_video" role="dialog" data-backdrop="static">
  277. <div class="modal-dialog">
  278. <div class="modal-content" style="box-shadow:none;border:none;">
  279. <div class="modal-header">
  280. <button type="button" class="close" data-dismiss="modal">
  281. <img id="close" src="{{ asset('images/close_btn.png') }}" class="close_img" alt="close" align="right">
  282. </button>
  283. </div>
  284. <div class="modal-body" style="margin-top:10%">
  286. <div onclick="playVid()">
  287. <img src="{{ asset('images/resign_message.png') }}" class="frame video-frame"/>
  288. <div id="video-container"></div>
  289. {# <div class="dialog-desc"> {{ 'mission.video' | trans }} </div> #}
  290. <div id="myProgress">
  291. <div id="bar"></div>
  292. <div class='bar-base'></div>
  293. </div>
  294. <div id="timer-div" class="video-timer"></div>
  295. </div>
  296. <div id="videoComfirmBtn" onclick='reflash()'>
  297. <img src="{{ asset('images/done_btn.png') }}" style="width: 65%;"
  298. data-dismiss="modal" class="modal-footer-btn video-btn">
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  303. </div>