Gueest
Full Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Доброго времени суток!
Да, проблема решена.
Все оказалось достаточно просто, вывод реализован на стороне сервера и выдается подготовленными, стандартными html-кусками кода.
Формирование iframe для модулей видео, находится в файле class-builder-module-video.php (путь от корня: wp-content\plugins\power-builder\framework\includes\modules\).
Внутри класса имеется метод shortcode_callback, и на скрине можно увидеть мою вставку кода:
...скрин https://prntscr.com/gzyv2r
и сам код:
Код: <?php
if ( is_type_link_youtube($src) ) {
$video_src = '<div class="container_yt_player" style="position: relative;"><img class="container_img" width="80" style="visibility: hidden;position: absolute; z-index: 5;padding-top: -40px;opacity: 0.6;" src="' . plugins_url('/power-builder/framework/images/') .'blackyt.png" /><div class="vid" style="text-align: center; position: relative;padding-bottom: 50%; padding-top: 40px;
height: 0;overflow: hidden;" data-url="' . get_yt_video_id($src) . '" data-num="1"><img style="margin-top: -40px;transform: scale(1.4);" src="//img.youtube.com/vi/' . get_yt_video_id($src) . '/hqdefault.jpg"></div></div>';
}
?>
Вспомогательные функции, удобно разместились в глобальном файле functions.php (путь от корня: wp-content\plugins\power-builder\framework\).
и сам код:
<?php
//------
// Type provider Youtube/ Return Boolean: true|false
if ( ! function_exists( 'is_type_link_youtube' ) ) {
function is_type_link_youtube( $url ) {
$links = array("http://www.youtube.com", "https://www.youtube.com", "https://youtu.be", "http://youtu.be");
for($j=0; $j<count($links); $j++) {
if(strpos($url, $links[$j]) !== false) {
return true;
}
}
return false;
}
}
// Return puth folder: plugins
if ( ! function_exists( 'get_puth_plugin' ) ) {
function get_puth_plugin() {
return plugin_dir_url( __FILE__ );
}
}
// Return idvideo yt from url Youtube
if ( ! function_exists( 'get_yt_video_id' ) ) {
function get_yt_video_id( $url ) {
$urls = array("v=", "/youtu.be/");
$idv = "";
$index = false;
if( strpos($url, $urls[0]) !== false ) {
$index = strpos($url, $urls[0]) + strlen($urls[0]);
} elseif ( strpos($url, $urls[1]) !== false ) {
$index = strpos($url, $urls[1]) +strlen($urls[1]);
}
if($index !== false) {
$f = false;
for($j=$index; $j<strlen($url); $j++) {
if($url[$j] == '&' || $url[$j] == '?') {
$idv = substr($url, $index, $j - $index);
return $idv;
}
}
$idv = substr($url, $index);
}
return $idv;
}
}
function my_library_enqueue_scripts(){
//if (is_admin()):
wp_register_script(
'lib-player-yt', //идентификатор
plugins_url('/power-builder/framework/library-player.js'), //источник
array(), //зависимости
'1.0.2.4', //версия
true //выполняем в нижнем колонтитуле
);
wp_enqueue_script('lib-player-yt');
//endif; //!is_admin
}
// System Hook
add_action('wp_print_scripts', 'my_library_enqueue_scripts');
//------
?>
Javascript код, вынесен в отдельный файл и соответствующим образом подключен в стиле WP
и сам код:
<script>
/**
* the script manager load iframe player yt when click on button Play
*/
(function() {
document.addEventListener("DOMContentLoaded", function() {
var css1 = document.createElement("style");
css1.innerHTML = ".container_yt_player:hover {cursor: pointer;}";
document.getElementsByTagName("head")[0].appendChild(css1);
var containers_player = document.querySelectorAll(".container_yt_player");
var containers_img = document.querySelectorAll(".container_yt_player img");
for(let j=0; j<containers_player.length; j++) {
containers_player[j].addEventListener("mouseover", function(event) {
this.children[0].src = "/wp-content/plugins/power-builder/framework/images/redyt.png";
this.children[0].style.opacity = "1";
}, false);
containers_player[j].addEventListener("mouseout", function(event) {
this.children[0].src = "/wp-content/plugins/power-builder/framework/images/blackyt.png";
this.children[0].style.opacity = "0.5";
}, false);
containers_player[j].addEventListener("click", function(event) {
this.children[0].style.display = "none";
this.children[1].innerHTML = "<iframe width='"+this.parentNode.offsetWidth+"' height='"+this.parentNode.offsetHeight+"' style='position: absolute;top: 0;left: 0; width:100%;height:100%;' src='https://www.youtube.com/embed/"+this.children[1].dataset.url+"?autoplay=1&showinfo=0&rel=0' frameborder='0' allowfullscreen></iframe>";
}, false);
}
function res(){
// reposition picture buttons when resize window
for(var j=0; j<containers_img.length; j++) {
var picture = containers_img[j];
picture.style.top = ( (containers_img[j].parentNode.offsetHeight - picture.offsetHeight) / 2 )+ "px";
picture.style.left = ( (containers_img[j].parentNode.offsetWidth - picture.offsetWidth) / 2 )+ "px";
picture.style.visibility = "visible";
}
}
res();
window.addEventListener("resize", res, false);
}, false);
})();
</script> |
разница в загрузке страницы Ссылка |
Всего записей: 520 | Зарегистр. 25-04-2011 | Отправлено: 00:27 21-10-2017 | Исправлено: Gueest, 23:40 21-10-2017 |
|
Система IP-видеонаблюдения "Линия". Скачать бесплатную демо-версию для 16 камер.
