Html Yayın İçine Logo Ekleme

Bu konuyu okuyanlar

yunusevo

Öğrenci
Katılım
14 Ağustos 2020
Mesajlar
4
Reaksiyon puanı
0
Puanları
1
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
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
32
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
Katılım
14 Ağustos 2020
Mesajlar
4
Reaksiyon puanı
0
Puanları
1
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
Katılım
10 Eylül 2020
Mesajlar
36
Reaksiyon puanı
15
Puanları
8
Yaş
23
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.
 

Senior_53

elitt
Katılım
14 Ekim 2020
Mesajlar
2,584
Çözümler
2
Reaksiyon puanı
5,377
Puanları
113
Css ile yapılamaz büyük iht
Editlemen lazım
 

Asuna-san

Öğrenci
Katılım
10 Eylül 2020
Mesajlar
36
Reaksiyon puanı
15
Puanları
8
Yaş
23
Hocam, fakat ekranı full screen yaptığında kaybolur, işinizi görmeyebilir.
 

Samet UCA

Müdavim
Katılım
3 Ağustos 2012
Mesajlar
3,277
Reaksiyon puanı
2,912
Puanları
113
İ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
Katılım
14 Ağustos 2020
Mesajlar
4
Reaksiyon puanı
0
Puanları
1
İ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
 
Üst