Html Yayın İçine Logo Ekleme

Bu konuyu okuyanlar

yunusevo

Öğrenci
Merhabalar
<link rel="stylesheet" href="http://releases.flowplayer.org/7.0.2/skin/skin.css">
<style>.flowplayer {background-color: #00abcd;}
.flowplayer .fp-color-play {fill: #eee;}
</style>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
<script src="http://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
<div data-live="true" data-ratio="0.5625" class="flowplayer">
<video data-title="Live stream">
<source type="application/x-mpegurl"
src="https://tv-trt1.live.trt.com.tr/master_720.m3u8">
</video>
</div>

Elimde böyle bir kod var

Kodu çalıştırdığımda böyle bir ekran geliyo :
burXnP.png


Ben buna logo eklemek istiyorum nasıl yapabilirim.

örn :
viwzMj.png
 

chnkyn

Öğrenci
böyle bir şey denemedim ama, videonun o kısmını silip yerine kendi logonu yerleştirmek istiyorsan, video düzenleme programları ile yapabilirsin (camtasia gibi)

yok video oynarken üstüne kendi logomu ekleyeceğim dersen de,
video containerına position:relative
ve
logona => position:absolute verdikten sonra
logonun top ve left/right değerleriyle oynayarak üstüne denk getirene kadar değiştirebilirsin.
örn =>
top:100px;
right:50px;

üstten 100 ve sağdan da 50 px içeri girer.
 

yunusevo

Öğrenci
böyle bir şey denemedim ama, videonun o kısmını silip yerine kendi logonu yerleştirmek istiyorsan, video düzenleme programları ile yapabilirsin (camtasia gibi)

yok video oynarken üstüne kendi logomu ekleyeceğim dersen de,
video containerına position:relative
ve
logona => position:absolute verdikten sonra
logonun top ve left/right değerleriyle oynayarak üstüne denk getirene kadar değiştirebilirsin.
örn =>
top:100px;
right:50px;

üstten 100 ve sağdan da 50 px içeri girer.
Usta bu canlı yayın mesela selcuksportsu falan biliyosundur yayının üstünde kendi logosu var bende o tarz bişey yapmak istiyorum eğer biliyorsan benim attığım html ile oynayıp tekrar atabilir misin?
 

Asuna-san

Öğrenci
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://releases.flowplayer.org/7.0.2/skin/skin.css">
    <style>
            .flowplayer 
            {
                background-color: #00abcd;
            }
            .flowplayer .fp-color-play 
            {
                fill: #eee;
            }
            .flowplayer{
                width: 1000px;
            }
            .site-name{
                position: absolute;
                right: 400px;
                top: 100px;
                z-index: 999;
                font-size: 25px;
                font-weight: bold;
                background: blue;
                border-radius: 5px;
                color:#FFFFFF;
           }
        </style>
        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="http://releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
        <script src="http://releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
</head>
<body>
<div data-live="true" data-ratio="0.5625" class="flowplayer">
<video data-title="Live stream">
<source type="application/x-mpegurl"
src="https://tv-trt1.live.trt.com.tr/master_720.m3u8">
</video>
</div>
<div class="site-name"><!-- BU KISMA LOGODA KOYABİLİRSİNİZ ---> yunusevoTV</div>
    
</div>
</body>
</html>

Hocam top right left komutlarından pozisyonunu kendiniz ayarlayabilirsiniz önerim yazı yerine <img src="dosyayolu"> Logo koymanız.
 

Samet UCA

Profesör
Özel başlık
Software Developer
İyide bu htmlli bir durum değil ki. Canlı yayın yapacağın program o an canlı olarak paylaşılan ekranda çizim-logo ekleme-renk ayarları gibi seçeneklere izin verir. Zaten canlı yayınları takip edersen adamlar logoları mouse ile sürükleyip oraya bırakıyor.
 
Son düzenleme:

yunusevo

Öğrenci
İyide bu htmlli bir durum değil ki. Canlı yayın yapacağın program o an canlı olarak paylaşılan ekranda çizim-logo ekleme-renk ayarları gibi seçeneklere izin verir. Zaten canlı yayınları takip edersen adamlar logoları mouse ile sürükleyip oraya bırakıyor.
twitch gibi değil hocam şu şekilde bir örnek veriyim
siteye bakarsan sol üstte twitter işareti logolar reklamlar falan var html ile yapmış bunları ve tam ekran yapınca da gitmiyor bende bu şekilde bir şey sormuştum
Mesaj otomatik birleştirildi:

tam ekran yaptığımızda sağ üstte telegram adresi logosu görüyoruzya mesela bende o şekilde bir şey arıyorum
 

SDN Son Haberler

Son mesajlar

Üst