<?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');
