Custom Widget Video Elementor

PHOTO EMBED

Thu Aug 15 2024 08:44:16 GMT+0000 (Coordinated Universal Time)

Saved by @quanganh141220 #php #elementor #wigetcustom #videocustom 

<?php 

class Elementor_Custom_Video_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'custom_video_widget';
    }

    public function get_title() {
        return __('Custom Video Widget', 'plugin-name');
    }

    public function get_icon() {
        return 'eicon-video-camera';
    }

    public function get_categories() {
        return ['basic'];
    }

    protected function _register_controls() {
        $this->start_controls_section(
            'content_section',
            [
                'label' => __('Content', 'plugin-name'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'source',
            [
                'label' => __('Source', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                    'self_hosted' => __('Self Hosted', 'plugin-name'),
                    'external' => __('External URL', 'plugin-name'),
                ],
                'default' => 'self_hosted',
            ]
        );

        $this->add_control(
            'video_url',
            [
                'label' => __('Choose Video File', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'media_type' => 'video',
                'condition' => [
                    'source' => 'self_hosted',
                ],
            ]
        );

        $this->add_control(
            'autoplay',
            [
                'label' => __('Autoplay', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes', // Set default to 'yes'
            ]
        );

        $this->add_control(
            'play_on_mobile',
            [
                'label' => __('Play on Mobile', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'mute',
            [
                'label' => __('Mute', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'no',
            ]
        );

        $this->add_control(
            'loop',
            [
                'label' => __('Loop', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'plugin-name'),
                'label_off' => __('No', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'no',
            ]
        );

        $this->add_control(
            'player_controls',
            [
                'label' => __('Player Controls', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Show', 'plugin-name'),
                'label_off' => __('Hide', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'download_button',
            [
                'label' => __('Download Button', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Show', 'plugin-name'),
                'label_off' => __('Hide', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'no',
            ]
        );

        $this->add_control(
            'poster',
            [
                'label' => __('Poster', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'media_type' => 'image',
            ]
        );

        $this->add_control(
            'show_play_button',
            [
                'label' => __('Show Play/Pause Button', 'plugin-name'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => __('Show', 'plugin-name'),
                'label_off' => __('Hide', 'plugin-name'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();

        // Video HTML
        echo '<video id="custom-video" src="' . $settings['video_url']['url'] . '" ' . ($settings['autoplay'] === 'yes' ? 'autoplay' : '') . ' ' . ($settings['mute'] === 'yes' ? 'muted' : '') . ' ' . ($settings['loop'] === 'yes' ? 'loop' : '') . ' ' . ($settings['player_controls'] === 'yes' ? 'controls' : '') . ' poster="' . $settings['poster']['url'] . '"></video>';

        // Play/Pause Button
        if ($settings['show_play_button'] === 'yes') {
            // Default to pause icon if autoplay is enabled
            $icon_class = $settings['autoplay'] === 'yes' ? 'fa-pause' : 'fa-play';
            echo '<button id="custom-play-pause" class="play-button"><i class="fas ' . $icon_class . '"></i></button>';
        }

        // JavaScript for Play/Pause Button
        echo '<script>
                document.addEventListener("DOMContentLoaded", function() {
                    var video = document.getElementById("custom-video");
                    var playPauseButton = document.getElementById("custom-play-pause");
                    var icon = playPauseButton.querySelector("i");

                    // Play video if autoplay is enabled and video is muted (required by some browsers)
                    video.addEventListener("loadedmetadata", function() {
                        if (video.hasAttribute("autoplay")) {
                            video.play().then(function() {
                                icon.classList.remove("fa-play");
                                icon.classList.add("fa-pause");
                            }).catch(function(error) {
                                console.log("Autoplay failed: ", error);
                                icon.classList.remove("fa-pause");
                                icon.classList.add("fa-play");
                            });
                        }
                    });

                    playPauseButton.addEventListener("click", function() {
                        if (video.paused) {
                            video.play();
                            icon.classList.remove("fa-play");
                            icon.classList.add("fa-pause");
                        } else {
                            video.pause();
                            icon.classList.remove("fa-pause");
                            icon.classList.add("fa-play");
                        }
                    });
                });
            </script>';
    }
}


//-------------------------------------------------END-------------------------------------//
Dưới đây là đoạn đăng ký widget 
function register_custom_widget($widgets_manager)
{
    // Custom video widget
    require_once(__DIR__ . '/widgets/custom-video.php');
    $widgets_manager->register(new \Elementor_Custom_Video_Widget());
}
add_action('elementor/widgets/register', 'register_custom_widget');
content_copyCOPY

Custom video widget giống của elementor 90% và có thêm button play/pause