Прежде всего, прошу прощения за свое незнание. Я ни в коем случае не веб-дизайнер. Я работаю в церкви и пытаюсь сделать анимированный оверлей для нашей прямой трансляции во время текущей пандемии c. Я создал весь анимированный график c и нашел плагин к программному обеспечению OBS, который позволит мне управлять анимированными наложениями. Однако этот плагин управляет оверлеем, который не работает в моем контексте. Я включаю в это сообщение как плагин управления наложением, так и мой файл Google Web Designer. Я хочу изменить текст внутри текстовых полей, чтобы он соответствовал вводимому тексту в подключаемом модуле управления (так что «имя» в подключаемом модуле управления будет «Имя» в файле Google Web Designer, а «функция» - в подключаемом модуле управления будет "Заголовком" в файле Google Web Designer. Любая помощь будет принята с благодарностью. Я готов изменить код в одном или обоих файлах, если он работает.
Спасибо!
Файл Google Web Designer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="Google Web Designer 8.0.1.0401">
<meta name="template" content="Banner 3.0.0">
<meta name="environment" content="gwd-googleads">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="gwdpage_style.css" rel="stylesheet" data-version="13" data-exports-type="gwd-page">
<link href="gwdpagedeck_style.css" rel="stylesheet" data-version="14" data-exports-type="gwd-pagedeck">
<link href="gwdgooglead_style.css" rel="stylesheet" data-version="8" data-exports-type="gwd-google-ad">
<link href="gwdattached_style.css" rel="stylesheet" data-version="2" data-exports-type="gwd-attached">
<style type="text/css" id="gwd-lightbox-style">
.gwd-lightbox {
overflow: hidden;
}
</style>
<style type="text/css" id="gwd-text-style">
p {
margin: 0px;
}
h1 {
margin: 0px;
}
h2 {
margin: 0px;
}
h3 {
margin: 0px;
}
</style>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.gwd-page-container {
position: relative;
width: 100%;
height: 100%;
}
.gwd-page-content {
background-color: transparent;
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
position: absolute;
}
.gwd-page-wrapper {
background-color: rgb(255, 255, 255);
position: absolute;
transform: translateZ(0px);
}
.gwd-page-size {
width: 1920px;
height: 250px;
}
.gwd-page-z507 {
background-image: none;
background-color: rgba(255, 255, 255, 0);
}
.gwd-path-aaep {
position: absolute;
stroke: rgb(0, 0, 0);
stroke-width: 1px;
width: 1912.77px;
height: 256.908px;
left: -0.515295px;
top: -6.42143px;
fill: rgb(37, 37, 37);
}
.gwd-p-152w {
position: absolute;
font-size: 85px;
font-family: Oxygen;
left: 117px;
width: 821px;
height: 112px;
transform-origin: 556.356px 56.4514px 0px;
top: 15px;
}
.gwd-div-176z {
position: absolute;
opacity: 1;
transform-style: preserve-3d;
transform: translate3d(2001px, 0px, 0px);
left: 27.2732px;
top: 24.0792px;
}
.gwd-div-1pad {
position: absolute;
visibility: visible;
background-color: transparent;
opacity: 1;
transform-style: preserve-3d;
transform: translate3d(-2130px, 0px, 0px);
left: 307.39px;
top: 80.8558px;
}
@keyframes gwd-gen-12lrgwdanimation_gwd-keyframes {
0% {
transform: translate3d(-2130px, 0px, 0px) scale3d(1, 1, 1);
background-color: transparent;
opacity: 1;
animation-timing-function: ease-in;
}
20% {
transform: translate3d(-59px, -12px, 0px) scale3d(0.907009, 0.828613, 1);
background-color: transparent;
opacity: 1;
animation-timing-function: linear;
}
90% {
transform: translate3d(-59px, -12px, 0px) scale3d(0.907009, 0.828613, 1);
background-color: transparent;
opacity: 1;
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
background-color: transparent;
opacity: 0;
animation-timing-function: step-end;
}
}
#page1.gwd-play-animation .gwd-gen-12lrgwdanimation {
animation: 5s linear 0s 1 normal forwards running gwd-gen-12lrgwdanimation_gwd-keyframes;
}
[data-gwd-group="Title_Group"] .gwd-grp-17pp.gwd-path-aaep {
position: absolute;
stroke: rgb(0, 0, 0);
width: 1912.77px;
height: 256.908px;
left: -0.515295px;
top: -6.42143px;
fill: rgba(37, 37, 37, 0.65);
stroke-width: 0px;
}
[data-gwd-group="Title_Group"] .gwd-grp-17pp.gwd-svg-1rys {
top: 0px;
width: 1430px;
height: 139px;
transform-origin: 483.605px 32.7065px 0px;
left: 0px;
}
[data-gwd-group="Title_Group"] .gwd-grp-17pp.gwd-p-152w {
position: absolute;
font-size: 85px;
font-family: Oxygen;
left: 117px;
width: 821px;
transform-origin: 556.356px 56.4514px 0px;
top: 15px;
height: 75px;
}
[data-gwd-group="Title_Group"] .gwd-grp-17pp.gwd-h1-131l {
color: rgb(255, 255, 255);
top: 63px;
width: 1195px;
transform-origin: 336.71px 7.72695px 0px;
left: 92px;
font-size: 50px;
}
[data-gwd-group="Title_Group"] {
width: 1430px;
height: 139px;
}
@keyframes gwd-gen-bnycgwdanimation_gwd-keyframes {
0% {
transform: translate3d(2001px, 0px, 0px) scale3d(1, 1, 1);
opacity: 1;
animation-timing-function: ease-in;
}
20% {
transform: translate3d(240px, 17px, 0px) scale3d(0.907216, 0.834524, 1);
opacity: 1;
animation-timing-function: linear;
}
90% {
transform: translate3d(240px, 17px, 0px) scale3d(0.907216, 0.834524, 1);
opacity: 1;
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
opacity: 0;
animation-timing-function: linear;
}
}
#page1.gwd-play-animation .gwd-gen-bnycgwdanimation {
animation: 5s linear 0s 1 normal forwards running gwd-gen-bnycgwdanimation_gwd-keyframes;
}
[data-gwd-group="Name_Group"] .gwd-grp-499y.gwd-path-aaep {
position: absolute;
stroke: rgb(0, 0, 0);
width: 1912.77px;
height: 256.908px;
left: -0.515295px;
top: -6.42143px;
fill: rgb(37, 37, 37);
stroke-width: 0px;
}
[data-gwd-group="Name_Group"] .gwd-grp-499y.gwd-svg-1kjm {
fill: rgb(176, 176, 176);
width: 811px;
height: 84px;
transform-origin: 274.845px 20.9605px 0px;
left: 0px;
top: 4px;
}
[data-gwd-group="Name_Group"] .gwd-grp-499y.gwd-p-152w {
position: absolute;
font-family: Oxygen;
left: 117px;
top: 15px;
font-size: 65px;
height: 86px;
width: 635px;
transform-origin: 430.415px 43.2458px 0px;
}
[data-gwd-group="Name_Group"] .gwd-grp-499y.gwd-h1-a2xb {
left: 90px;
top: 0px;
}
[data-gwd-group="Name_Group"] {
width: 811px;
height: 88px;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,regular,700" rel="stylesheet" type="text/css">
<script data-source="googbase_min.js" data-version="4" data-exports-type="googbase" src="googbase_min.js"></script>
<script data-source="gwd_webcomponents_v1_min.js" data-version="2" data-exports-type="gwd_webcomponents_v1" src="gwd_webcomponents_v1_min.js"></script>
<script data-source="gwdpage_min.js" data-version="13" data-exports-type="gwd-page" src="gwdpage_min.js"></script>
<script data-source="gwdpagedeck_min.js" data-version="14" data-exports-type="gwd-pagedeck" src="gwdpagedeck_min.js"></script>
<script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-google-ad" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<script data-source="gwdgooglead_min.js" data-version="8" data-exports-type="gwd-google-ad" src="gwdgooglead_min.js"></script>
<script data-source="gwdattached_min.js" data-version="2" data-exports-type="gwd-attached" src="gwdattached_min.js"></script>
<script data-source="gwdtexthelper_min.js" data-version="18" data-exports-type="gwd-text-helper" src="gwdtexthelper_min.js"></script>
<script type="text/javascript" src="groups_runtime.min.1.0.js" gwd-groups-version="1.0"></script>
</head>
<body>
<template id="gwd-group-definitions">
<div data-gwd-group-def="Title_Group" data-gwd-group-class="gwd-grp-17pp" style="display: none;">
<svg data-gwd-shape="path" preserveAspectRatio="none" viewBox="0 0 1430 139" class="gwd-path-aaep gwd-svg-1rys gwd-grp-17pp" data-gwd-grp-id="Title_Box">
<path stroke-linecap="round" stroke-linejoin="round" d="M 0,138.983 C 0,138.983 154.013,0 154.013,0 154.013,0 1430,0 1430,0 1430,0 1287.015,139 1287.015,139" class="gwd-grp-17pp"></path>
</svg>
<h1 class="gwd-p-152w gwd-h1-131l gwd-grp-17pp" data-gwd-fit-font-size="" gwd-min-font-size-px="55" data-gwd-grp-id="Title_Text">Title</h1></div>
<div data-gwd-group-def="Name_Group" data-gwd-group-class="gwd-grp-499y" style="display: none;">
<svg data-gwd-shape="path" preserveAspectRatio="none" viewBox="0 0 811 84" class="gwd-path-aaep gwd-svg-1kjm gwd-grp-499y" data-gwd-grp-id="Name_Box">
<path stroke-linecap="round" stroke-linejoin="round" d="M 0,83.99 C 0,83.99 87.34,0 87.34,0 87.34,0 811,0 811,0 811,0 729.912,84 729.912,84" class="gwd-grp-499y"></path>
</svg>
<h1 class="gwd-p-152w gwd-h1-a2xb gwd-grp-499y" data-gwd-fit-font-size="" gwd-min-font-size-px="55" data-gwd-grp-id="Name">Name Text</h1></div>
</template>
<gwd-text-helper id="gwd-text-helper_1" fit-font-size-for-selector="[data-gwd-fit-font-size],[gwd-fitting-truncate]" data-gwd-fit-font-size="false"></gwd-text-helper>
<gwd-google-ad id="gwd-ad" polite-load="">
<gwd-metric-configuration></gwd-metric-configuration>
<gwd-pagedeck class="gwd-page-container" id="pagedeck">
<gwd-page id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox gwd-page-z507" data-gwd-width="1920px" data-gwd-height="250px">
<div class="gwd-page-content gwd-page-size">
<div class="gwd-div-1pad gwd-gen-12lrgwdanimation" data-gwd-group="Title_Group" id="Titles_Group"></div>
<div class="gwd-div-176z gwd-gen-bnycgwdanimation" data-gwd-group="Name_Group" id="Names_Group"></div>
</div>
</gwd-page>
</gwd-pagedeck>
</gwd-google-ad>
<script type="text/javascript" id="gwd-init-code">
(function() {
var gwdAd = document.getElementById('gwd-ad');
/**
* Handles the DOMContentLoaded event. The DOMContentLoaded event is
* fired when the document has been completely loaded and parsed.
*/
function handleDomContentLoaded(event) {
}
/**
* Handles the WebComponentsReady event. This event is fired when all
* custom elements have been registered and upgraded.
*/
function handleWebComponentsReady(event) {
// Start the Ad lifecycle.
setTimeout(function() {
gwdAd.initAd();
}, 0);
}
/**
* Handles the event that is dispatched after the Ad has been
* initialized and before the default page of the Ad is shown.
*/
function handleAdInitialized(event) {}
window.addEventListener('DOMContentLoaded',
handleDomContentLoaded, false);
window.addEventListener('WebComponentsReady',
handleWebComponentsReady, false);
window.addEventListener('adinitialized',
handleAdInitialized, false);
})();
</script>
</body>
</html>
Плагин управления
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Lower thirds control panel</title>
<link rel="stylesheet" href="../common/css/style-001.css">
<script src="../common/js/jquery.js"></script>
</head>
<body class="lower-thirds-panel panel">
<div class="static-panel-top">
<input id="lower-thirds-name" placeholder="Name and surname">
<input id="lower-thirds-function" placeholder="Function">
<button class="onethird" id="sender" onclick="function_send()">Show</button>
<button class="onethird" id="sender" onclick="function_hide()">Hide</button>
<div class="radio-position">
<input type="radio" name="radio-group-position" id="position-left" checked="checked" /><label for="position-left">Left</label>
<input type="radio" name="radio-group-position" id="position-right" /><label for="position-right">Right</label>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="panel-bottom">
<h3>Lower thirds list</h3>
<ul id="predefined">
<li><div class="name">Name 1</div><div class="function">Position 1</div></li>
<li><div class="name">Name 2</div><div class="function">Position 2</div></li>
<li><div class="name">Name 3</div><div class="function">Position 3</div></li>
<li><div class="name">Name 4</div><div class="function">Position 4</div></li>
</ul>
<div>
<script>
$("ul#predefined li").click(function(){
cur_name=$(this).children('.name').text();
cur_function=$(this).children('.function').text();
$("#lower-thirds-name:text").val(cur_name);
$("#lower-thirds-function:text").val(cur_function);
});
var bc = new BroadcastChannel('obs-lower-thirds-channel');
function function_send() {
name_to_send = $("#lower-thirds-name:text").val();
function_to_send = $("#lower-thirds-function:text").val();
if (document.getElementById("position-left").checked == true) {position = "left"};
if (document.getElementById("position-right").checked == true) {position = "right"};
bc.postMessage(name_to_send + '|' + function_to_send + '|' + position + '|' + 'animateIn'); /* send */
};
function function_hide() {
bc.postMessage('|||animateOut'); /* send - only last parameter*/
}
</script>
</body>
</html>