video-playlist-2.php
203 lines
| 1 | <?php |
| 2 | |
| 3 | if ( ! defined( 'ABSPATH' ) ) { |
| 4 | exit; // Exit if accessed directly. |
| 5 | } |
| 6 | $is_preloader = '1'; |
| 7 | if ( did_action( 'elementor/loaded' ) ) { |
| 8 | if ( \Elementor\Plugin::$instance->preview->is_preview_mode() ) { |
| 9 | $is_preloader = ''; |
| 10 | } |
| 11 | } |
| 12 | |
| 13 | if ( $is_preloader == '1' ) { |
| 14 | ?> |
| 15 | <div id="video_loader"> |
| 16 | <div id="loader"></div> |
| 17 | </div> |
| 18 | <?php |
| 19 | } |
| 20 | |
| 21 | ?> |
| 22 | <div class="spel-video-playlist video-playlist-2 video_slider_area video-playlist"> |
| 23 | <div class="gallery-top"> |
| 24 | <?php |
| 25 | $i = 0; |
| 26 | $all_videos = $settings['tabs'] ?? ''; |
| 27 | $i = '0'; |
| 28 | $active = ''; |
| 29 | if ( is_array( $all_videos ) ) { |
| 30 | foreach ( $all_videos as $videos ) { |
| 31 | $child_videos = $videos['videos'] ?? ''; |
| 32 | |
| 33 | foreach ( $child_videos as $child_video ) { |
| 34 | $video_url = $child_videos['video_upload'] ?? ''; |
| 35 | ?> |
| 36 | <div class="item"> |
| 37 | <div class="ezd-grid ezd-grid-cols-12 video2_wrapper"> |
| 38 | <div class="ezd-lg-col-7 player_wrapper"> |
| 39 | <video id="player_<?php echo esc_attr( $child_video['video_upload']['id'] ); ?>" |
| 40 | class="video-js vjs-fluid vjs-default-skin" controls preload playsinline |
| 41 | poster="<?php echo esc_attr( $child_video['thumbnail']['url'] ); ?>"> |
| 42 | <source src="<?php echo esc_url( $child_video['video_upload']['url'], ); ?>" type="video/mp4"> |
| 43 | </video> |
| 44 | </div> |
| 45 | <div class="ezd-lg-col-5"> |
| 46 | <div class="slide_text"> |
| 47 | <a href="#"> |
| 48 | <h4 class="video_title"> <?php echo esc_html( $child_video['title2'] ); ?> </h4> |
| 49 | </a> |
| 50 | <?php echo wp_kses_post( wpautop( $child_video['video_caption'] ) ); ?> |
| 51 | <div class="video_user"> |
| 52 | <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) ?>"> |
| 53 | <i class="far fa-user"></i> |
| 54 | <?php the_author_meta( 'display_name' ); ?> |
| 55 | </a> |
| 56 | <a href="<?php spel_day_link(); ?>"> |
| 57 | <i class="far fa-calendar"></i> |
| 58 | <?php the_time( get_option( 'date_format' ) ); ?> |
| 59 | </a> |
| 60 | </div> |
| 61 | </div> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
| 65 | <?php |
| 66 | } |
| 67 | } |
| 68 | } |
| 69 | ?> |
| 70 | </div> |
| 71 | |
| 72 | <div class="gallery_main_area"> |
| 73 | <div class="gallery-thumbs p-0"> |
| 74 | <?php |
| 75 | if ( is_array( $all_videos ) ) { |
| 76 | foreach ( $all_videos as $videos ) { |
| 77 | $child_videos = $videos['videos'] ?? ''; |
| 78 | |
| 79 | foreach ( $child_videos as $child_video ) { |
| 80 | $img_id = attachment_url_to_postid( $child_video['thumbnail']['url'] ); |
| 81 | ?> |
| 82 | <div class="item"> |
| 83 | <div class="gallery_inner_thumb"> |
| 84 | <?php |
| 85 | if ( ! empty ( $get_img ) ) : |
| 86 | wp_get_attachment_image( $img_id, 'spel_270x152' ); |
| 87 | else : ?> |
| 88 | <img src="<?php echo esc_url( $child_video['thumbnail']['url'] ); ?>" |
| 89 | alt="<?php esc_attr_e( 'Video Poster Image', 'spider-elements' ); ?>" /> |
| 90 | <?php endif; ?> |
| 91 | <div class="caption_text"> |
| 92 | <div class="play-icon"> |
| 93 | <i class="fas fa-play"></i> |
| 94 | </div> |
| 95 | <h4 class="thumbnail_title"> <?php echo esc_html( $child_video['title2'] ); ?></h4> |
| 96 | </div> |
| 97 | </div> |
| 98 | </div> |
| 99 | <?php |
| 100 | } |
| 101 | } |
| 102 | } |
| 103 | ?> |
| 104 | </div> |
| 105 | <div class="prev"> |
| 106 | <i class="fas fa-chevron-left"></i> |
| 107 | </div> |
| 108 | <div class="next"> |
| 109 | <i class="fas fa-chevron-right"></i> |
| 110 | </div> |
| 111 | </div> |
| 112 | </div> |
| 113 | |
| 114 | <script type="text/javascript"> |
| 115 | ;(function($) { |
| 116 | "use strict"; |
| 117 | $(document).ready(function() { |
| 118 | $(".gallery-top") |
| 119 | .slick({ |
| 120 | slidesToShow: 1, |
| 121 | slidesToScroll: 1, |
| 122 | arrows: false, |
| 123 | fade: true, |
| 124 | infinite: false, |
| 125 | asNavFor: ".gallery-thumbs", |
| 126 | }) |
| 127 | .on("beforeChange", function(event, slick, currentSlide, nextSlide) { |
| 128 | $(".gallery-top .slick-current video").attr( |
| 129 | "src", |
| 130 | $(".gallery-top .slick-current video").attr("src") |
| 131 | ); |
| 132 | $(".gallery-top .slick-current .video-js").removeClass("vjs-playing"); |
| 133 | }); |
| 134 | $(".gallery-thumbs") |
| 135 | .slick({ |
| 136 | slidesToShow: 4, |
| 137 | slidesToScroll: 1, |
| 138 | vertical: false, |
| 139 | asNavFor: ".gallery-top", |
| 140 | dots: false, |
| 141 | focusOnSelect: true, |
| 142 | arrows: true, |
| 143 | infinite: false, |
| 144 | swipeToSlide: true, |
| 145 | prevArrow: $(".prev"), |
| 146 | nextArrow: $(".next"), |
| 147 | responsive: [{ |
| 148 | breakpoint: 992, |
| 149 | settings: { |
| 150 | vertical: false, |
| 151 | slidesToShow: 3, |
| 152 | }, |
| 153 | }, |
| 154 | { |
| 155 | breakpoint: 768, |
| 156 | settings: { |
| 157 | vertical: false, |
| 158 | slidesToShow: 3, |
| 159 | }, |
| 160 | }, |
| 161 | { |
| 162 | breakpoint: 650, |
| 163 | settings: { |
| 164 | vertical: false, |
| 165 | slidesToShow: 2, |
| 166 | }, |
| 167 | }, |
| 168 | { |
| 169 | breakpoint: 480, |
| 170 | settings: { |
| 171 | vertical: false, |
| 172 | slidesToShow: 1, |
| 173 | }, |
| 174 | }, |
| 175 | ], |
| 176 | }) |
| 177 | .on("beforeChange", function(event, slick, currentSlide, nextSlide) { |
| 178 | $(".gallery-thumbs .slick-current video").attr( |
| 179 | "src", |
| 180 | $(".gallery-thumbs .slick-current video").attr("src") |
| 181 | ); |
| 182 | $(".gallery-thumbs .slick-current .video-js").removeClass( |
| 183 | "vjs-playing" |
| 184 | ); |
| 185 | }); |
| 186 | |
| 187 | function Video_slide_player() { |
| 188 | var myPlayers = Array( |
| 189 | <?php |
| 190 | foreach( $all_videos as $videos ) : |
| 191 | $child_videos = $videos['videos'] ?? ''; |
| 192 | foreach( $child_videos as $child_video ) : ?> videojs( |
| 193 | "player_<?php echo esc_js( $child_video['video_upload']['id'] ); ?>"), |
| 194 | <?php endforeach; |
| 195 | endforeach; |
| 196 | ?> |
| 197 | ); |
| 198 | } |
| 199 | |
| 200 | Video_slide_player(); |
| 201 | }) |
| 202 | })(jQuery); |
| 203 | </script> |