• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Usar a biblia/letra do Holyrics em Lives no OBS

deneripr

Well-Known Member
#1
Vou descrever aqui como fazer para integrar a bíblia e ou letras apresentadas com o Holyrics no telão diretamente no OBS como uma espécie de "legenda", veja a forma que estamos usando em nossa igreja:

resultado biblia live.png

Essa integração é bem simples e é baseada em uso de html, mesmo que não tenha muito conhecimento do tema, você pode personalizar a exibição desse texto/letra em sua live. Primeiro passo a ser feito é dentro no holyrics habilitar o servidor que irá "hospedar" a página web que você irá inserir no OBS:

holyrics 1.png

holyrics 2.png Na imagem acima vemos o painel principal do Plugin Holyrics, na parte de cima podemos ver o IP que está configurado a nossa máquina e a porta utilizada pelo servidor para o serviço. Vemos também logo abaixo vários endereços que estão disponíveis para a utilização, o primeiro deles é uma transmissão de imagens, que é mais pesada e não é tão interessante pra nossa proposta, então iremos nos focar nos endereços com final "/text" que apenas transmite dados de texto e formatação html, para começar inicie o servidor e copie o endereço como mostrado abaixo:

holyrics 3.png Esse será a nossa visualização personalizada para a BIBLIA, como temos mais 2 endereços disponíveis vamos configurar 1 para exibir apenas a bíblia e outro para exibir as letras das músicas, podendo formatar a exibição de maneira totalmente diferente em cada uma.

No OBS iremos adicionar uma nova fonte a cena que deseje, e o tipo da fonte é NAVEGADOR:
holyrics 5.png
holyrics 6.png
Após nomear a sua fonte (aqui coloquei BIBLIA) irá se abrir a caixa acima, onde você irá inserir o endereço que copiou lá no holyrics, além disso irá escolher a largura e altura da página, aqui o recomendado é usar a largura da tela que esteja usando na transmissão (primeiro número da resolução utilizada 1920x1080, 1280x720 etc) e a altura você pode experimentar e verificar quanto é o necessário para se encaixar o padrão estético que lhe agrada, eu utilizo como base 200px.

holyrics 7.png
Após isso é só dar OK e o OBS já deve exibir a página com o texto apresentado:

holyrics 8.png
Veja que aqui a posição da página adicionada ficou no topo, ai é só ajustar para baixo. Agora que o servidor e o OBS já estão se comunicando e já está exibindo a sua Bíblia, vamos personalizar a exibição, começando por tirar essa caixa preta e deixando esse funto transparente, pra isso voltamos ao Holyrics e entramos na tela de configurações de exibição (tanto faz entrar pelo módulo bíblia ou Holyrics):

configuração de exibição.png
configuração de exibição 2.png

Iremos para a aba HTML 1 (que é o que estamos configurando) e desmarcamos as outras opções deixanto ativa para exibir apenas a Bíblia, e entramos em "configurações HTML" marcando a opção "Plano de fundo - Transparente" como abaixo::
configuração de exibição 3.png
configuração de exibição fundo transparente.png

Após isso no OBS já irá exibir o texto básico sem o fundo preto sobre a imagem, caso necessário atualize o cachê da fonte navegador que ele irá recarregar a página. Com o texto já sendo exibido no OBS de forma limpa, você pode personalizar a exibição (cor do texto, fonte, fundo etc) através da edição do código CSS no Plugin do Holyrics:

holyrics 9.png
Na aba abaixo vemos o código CSS que personaliza a página HTML que integramos no OBS, de padrão o CSS não está fazendo nenhuma alteração, então o que está sendo exibido é o HTML puro, você pode escolher um dos temas sugeridos clicando no link "códigos de exemplo" e selecionar uma das personalizações, ai é só copiar o código e substituir o código na caixa abaixo.
holyrics 10.png
holyrics 11.png
Após colar o código clique em "atualizar páginas" e o estilo escolhido deve ser exibido no OBS.

Como referi, você pode criar personalizações diferentes para Bíblia e Letras (é como usamos aqui na igreja) veja como fica uma na fonte bíblia que fizemos juntos e outro na fonte LETRAS que criei e deixei exclusiva para exibir as músicas:

resultado biblia.png
resultado letras.png

Lembrando que no OBS você ainda pode redimensionar a exibição, mas lembre-se que para alterar a proporção mude o tamanho da fonte (largura x altura) nas propriedades da fonte.

Depois de estar funcionando corretamente como chegamos aqui, para personalizar a exibição da forma que mais agradar é só ir editando o código CSS e ir ajustando, ou copiar algum código de alguém que editou, você achou que encaixa bem com sua live queira implantar. Vou mandar depois aqui o código que usei na nossa igreja, se você tiver uma edição diferente, mande aqui a print de como ficou e compartilhe o código também.
 

Attachments

Última edição:

deneripr

Well-Known Member
#2
Aqui o código CSS que usamos para a bíblia (1º imagem):


span.header {
display: block;
position: absolute;
white-space: nowrap;
font-size: 4px;
margin-left: 100px;
padding: 10px 20px;
border-radius: 2px;
background-color: rgba(102, 51, 0, 1); /* Cor de Fundo da Referencia do Versículo*/
z-index:10;
text-shadow: 2px 2px 4px black;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

}

.bible_slide ctt {
display: block;
background-color: rgba(0, 0, 0, 0.6); /* Cor de Fundo do Texto do Versículo*/
margin: auto;
margin-top: 25px;
padding: 20px 20px;
border-radius: 5px;
text-shadow: 2px 2px 4px black;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

}

.bible_slide span {
display: none;
}