https://www.mygica.com/wp-content/themes/Mygica/elementor-widgets/…/video-player-widget.js?ver=1.0.0

1/**
2 * 视频播放器小部件 JavaScript
3 */
4
5(function($) {
6    'use strict';
7
8    // 等待jQuery加载
9    function waitForJQuery(callback) {
10        if (typeof jQuery !== 'undefined') {
11            callback(jQuery);
12        } else {
13            setTimeout(function() {
14                waitForJQuery(callback);
15            }, 100);
16        }
17    }
18
19    waitForJQuery(function($) {
20        
21        class GentiatechVideoPlayer {
22            constructor($element) {
23                this.$element = $element;
24                this.$container = $element.find('.mygica-video-container');
25                this.$playBtn = $element.find('.mygica-video-play-btn');
26                this.videoUrl = this.$container.data('video-url');
27                this.videoType = this.$container.data('video-type');
28                this.lightbox = null;
29                
30                this.init();
31            }
32
33            init() {
34                this.bindEvents();
35                this.createLightbox();
36            }
37
38            bindEvents() {
39                // 点击播放按钮
40                this.$playBtn.on('click', (e) => {
41                    e.preventDefault();
42                    e.stopPropagation();
43                    this.openLightbox();
44                });
45
46                // ESC键关闭灯箱
47                $(document).on('keydown', (e) => {
48                    if (e.keyCode === 27 && this.lightbox && this.lightbox.hasClass('active')) {
49                        this.closeLightbox();
50                    }
51                });
52            }
53
54            createLightbox() {
55                // 创建灯箱HTML
56                const lightboxHtml = `
57                    <div class="mygica-video-lightbox">
58                        <div class="mygica-video-lightbox-content">
59                            <button class="mygica-video-lightbox-close" type="button">
60                                <i class="fas fa-times"></i>
61                            </button>
62                            <div class="mygica-video-loading"></div>
63                            <div class="mygica-video-embed"></div>
64                        </div>
65                    </div>
66                `;
67
68                // 添加到body
69                this.lightbox = $(lightboxHtml);
70                $('body').append(this.lightbox);
71
72                // 绑定关闭事件
73                this.lightbox.find('.mygica-video-lightbox-close').on('click', () => {
74                    this.closeLightbox();
75                });
76
77                // 点击背景关闭
78                this.lightbox.on('click', (e) => {
79                    if (e.target === this.lightbox[0]) {
80                        this.closeLightbox();
81                    }
82                });
83            }
84
85            openLightbox() {
86                if (!this.videoUrl) {
87                    console.error('视频URL未设置');
88                    return;
89                }
90
91                // 显示灯箱
92                this.lightbox.addClass('active');
93                $('body').addClass('mygica-video-lightbox-open');
94
95                // 加载视频
96                this.loadVideo();
97            }
98
99            closeLightbox() {
100                // 隐藏灯箱
101                this.lightbox.removeClass('active');
102                $('body').removeClass('mygica-video-lightbox-open');
103
104                // 延迟清除视频内容，等待动画完成
105                setTimeout(() => {
106                    this.lightbox.find('.mygica-video-embed').empty();
107                    this.lightbox.find('.mygica-video-loading').show();
108                }, 300);
109            }
110
111            loadVideo() {
112                const $embed = this.lightbox.find('.mygica-video-embed');
113                const $loading = this.lightbox.find('.mygica-video-loading');
114
115                $loading.show();
116                $embed.empty();
117
118                let embedHtml = '';
119
120                switch (this.videoType) {
121                    case 'youtube':
122                        embedHtml = this.getYouTubeEmbed();
123                        break;
124                    case 'vimeo':
125                        embedHtml = this.getVimeoEmbed();
126                        break;
127                    case 'hosted':
128                        embedHtml = this.getHostedVideoEmbed();
129                        break;
130                    default:
131                        console.error('不支持的视频类型:', this.videoType);
132                        return;
133                }
134
135                if (embedHtml) {
136                    $embed.html(embedHtml);
137                    
138                    // 等待视频加载
139                    setTimeout(() => {
140                        $loading.hide();
141                    }, 1000);
142                }
143            }
144
145            getYouTubeEmbed() {
146                const videoId = this.extractYouTubeId(this.videoUrl);
147                if (!videoId) {

148                    console.error('无法提取YouTube视频ID');
149                    return '';
150                }
151
152                return `<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0" 
153                        frameborder="0" 
154                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
155                        allowfullscreen></iframe>`;
156            }
157
158            getVimeoEmbed() {
159                const videoId = this.extractVimeoId(this.videoUrl);
160                if (!videoId) {
161                    console.error('无法提取Vimeo视频ID');
162                    return '';
163                }
164
165                return `<iframe src="https://player.vimeo.com/video/${videoId}?autoplay=1" 
166                        frameborder="0" 
167                        allow="autoplay; fullscreen; picture-in-picture" 
168                        allowfullscreen></iframe>`;
169            }
170
171            getHostedVideoEmbed() {
172                return `<video controls autoplay>
173                        <source src="${this.videoUrl}" type="video/mp4">
174                        您的浏览器不支持视频播放。
175                    </video>`;
176            }
177
178            extractYouTubeId(url) {
179                const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
180                const match = url.match(regExp);
181                return (match && match[2].length === 11) ? match[2] : null;
182            }
183
184            extractVimeoId(url) {
185                const regExp = /(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
186                const match = url.match(regExp);
187                return match ? match[1] : null;
188            }
189        }
190
191        // 初始化所有视频播放器
192        function initVideoPlayers() {
193            $('.mygica-video-player').each(function() {
194                const $this = $(this);
195                if (!$this.data('mygica-video-initialized')) {
196                    new GentiatechVideoPlayer($this);
197                    $this.data('mygica-video-initialized', true);
198                }
199            });
200        }
201
202        // DOM准备就绪时初始化
203        $(document).ready(function() {
204            initVideoPlayers();
205        });
206
207        // Elementor前端初始化
208        $(window).on('elementor/frontend/init', function() {
209            elementorFrontend.hooks.addAction('frontend/element_ready/mygica_video_player.default', function($scope) {
210                const $videoPlayer = $scope.find('.mygica-video-player');
211                if ($videoPlayer.length && !$videoPlayer.data('mygica-video-initialized')) {
212                    new GentiatechVideoPlayer($videoPlayer);
213                    $videoPlayer.data('mygica-video-initialized', true);
214                }
215            });
216        });
217
218        // 防止body滚动（当灯箱打开时）
219        const style = document.createElement('style');
220        style.textContent = `
221            body.mygica-video-lightbox-open {
222                overflow: hidden;
223                padding-right: 17px; /* 防止滚动条消失导致的跳动 */
224            }
225        `;
226        document.head.appendChild(style);
227
228    });
229
230})(jQuery);