Videoplayer voorzien van actuele clips
Voor een internetstation ben ik nu bezig met het maken van een videoplayer die ze willen gaan gebruiken in hun webplayer.
Het idee is als volgt:
Als er een bepaalde track op is, en er is een videoclip aanwezig op de server, dan moet de videoplayer de videoclip gaan afspelen. Is er niks aanwezig? Dan schakelt ie naar een Webcam loop die ik al werkende heb. Er zijn 2 punten waar ik niet uit kom...
- Hoe check ik of er een .mp4 is wat bij de huidige Artiest - Titel hoort (Via XML kunnen we dat uitlezen wat er nu op zender is)
- Hoe start ik de videoclip zo goed mogelijk sync met de huidige plaat. (XML geeft aan wanneer de plaat is gestart, dus HuidigeTijd - PlaatStart = Start in secondes van videoclip?)
Op dit moment, ja het is nog even een lelijk stukje code, maar puur voor test! Het volgende script die mij nu voorziet van een webcam loop tussen 2 live streams en 2 tal overlays. Hier bij moet dus nog de mogelijkheid tot het automatisch starten en eindigen van een videoclip van de Artiest - title op dat moment.
Quote:
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet" type="text/css"/>
<style>
#video_box {
position: relative;
}
#video_overlaysup {
position: absolute;
background-color: #000;
color: #fff;
top: 25px;
left: 0px;
width: 720px;
height: 25px;
z-index: 100;
font-family: "Open Sans";
font-size: 18px;
font-weight: 500;
letter-spacing: -0.1em;
}
#video_overlays {
position: absolute;
background-color: #f4c217;
top: 340px;
left: 0px;
width: 720px;
height: 60px;
z-index: 100;
opacity: 0.8;
font-family: "Open Sans";
font-size: 18px;
font-weight: 500;
letter-spacing: -0.1em;
}
video#player {
position: absolute;
top: 0;
left: 0;
width: 720px;
height: 460px;
z-index: 99;
}
</style>
</head>
<body>
<div id="wrap_video">
<div id="video_box">
<div id="video_overlaysup"></div>
<div id="video_overlays">Loading...</div>
<div>
<video autoplay muted id="player" width="720" height="460">Your browser does not support this streaming content.</video>
</div>
</div>
<script>
window.onload = function() {
setTimeout("webcam()" , 1000);
setTimeout("balk()" , 1000);
}
function balk() {
setTimeout("document.getElementById('video_overlays').innerHTML = 'Je luistert naar beeRadio.nl';", 1000)
setTimeout("document.getElementById('video_overlays').innerHTML = 'Request? Vraag snel jouw plaat aan via http://www.beeradio.nl';", 5000)
setTimeout("updatebalk();" , 10000);
}
function updatebalk() { balk(); }
var video = document.getElementById('player');
var source = document.createElement('source');
source.setAttribute('src', 'http://streaming3.webcam.nl:80/dam/dam.stream/playlist.m3u8');
video.appendChild(source);
video.play();
function webcam() {
setTimeout("video.pause();", 1000)
setTimeout("source.setAttribute('src', 'http://streaming3.webcam.nl:80/dam/dam.stream/playlist.m3u8');", 1001)
setTimeout("video.load();", 1002)
setTimeout("video.play();", 1003)
setTimeout("document.getElementById('video_overlaysup').innerHTML = 'Live: De Dam, Amsterdam';", 1004)
setTimeout("video.pause();", 20000)
setTimeout("source.setAttribute('src', 'http://streaming3.webcam.nl/almelo/almelo.stream/playlist.m3u8');", 20001)
setTimeout("video.load();", 20002)
setTimeout("video.play();", 20003)
setTimeout("document.getElementById('video_overlaysup').innerHTML = 'Live: Bouw Stadhuis, Almelo';", 20004)
setTimeout("document.getElementById('video_overlaysup').innerHTML = 'Live: De Dam, Amsterdam';", 49999)
setTimeout("updatewebcam();" , 50000);
}
function updatewebcam() { webcam(); }
</script>
</body>
</html>
<head>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet" type="text/css"/>
<style>
#video_box {
position: relative;
}
#video_overlaysup {
position: absolute;
background-color: #000;
color: #fff;
top: 25px;
left: 0px;
width: 720px;
height: 25px;
z-index: 100;
font-family: "Open Sans";
font-size: 18px;
font-weight: 500;
letter-spacing: -0.1em;
}
#video_overlays {
position: absolute;
background-color: #f4c217;
top: 340px;
left: 0px;
width: 720px;
height: 60px;
z-index: 100;
opacity: 0.8;
font-family: "Open Sans";
font-size: 18px;
font-weight: 500;
letter-spacing: -0.1em;
}
video#player {
position: absolute;
top: 0;
left: 0;
width: 720px;
height: 460px;
z-index: 99;
}
</style>
</head>
<body>
<div id="wrap_video">
<div id="video_box">
<div id="video_overlaysup"></div>
<div id="video_overlays">Loading...</div>
<div>
<video autoplay muted id="player" width="720" height="460">Your browser does not support this streaming content.</video>
</div>
</div>
<script>
window.onload = function() {
setTimeout("webcam()" , 1000);
setTimeout("balk()" , 1000);
}
function balk() {
setTimeout("document.getElementById('video_overlays').innerHTML = 'Je luistert naar beeRadio.nl';", 1000)
setTimeout("document.getElementById('video_overlays').innerHTML = 'Request? Vraag snel jouw plaat aan via http://www.beeradio.nl';", 5000)
setTimeout("updatebalk();" , 10000);
}
function updatebalk() { balk(); }
var video = document.getElementById('player');
var source = document.createElement('source');
source.setAttribute('src', 'http://streaming3.webcam.nl:80/dam/dam.stream/playlist.m3u8');
video.appendChild(source);
video.play();
function webcam() {
setTimeout("video.pause();", 1000)
setTimeout("source.setAttribute('src', 'http://streaming3.webcam.nl:80/dam/dam.stream/playlist.m3u8');", 1001)
setTimeout("video.load();", 1002)
setTimeout("video.play();", 1003)
setTimeout("document.getElementById('video_overlaysup').innerHTML = 'Live: De Dam, Amsterdam';", 1004)
setTimeout("video.pause();", 20000)
setTimeout("source.setAttribute('src', 'http://streaming3.webcam.nl/almelo/almelo.stream/playlist.m3u8');", 20001)
setTimeout("video.load();", 20002)
setTimeout("video.play();", 20003)
setTimeout("document.getElementById('video_overlaysup').innerHTML = 'Live: Bouw Stadhuis, Almelo';", 20004)
setTimeout("document.getElementById('video_overlaysup').innerHTML = 'Live: De Dam, Amsterdam';", 49999)
setTimeout("updatewebcam();" , 50000);
}
function updatewebcam() { webcam(); }
</script>
</body>
</html>
Iemand hier die mij kan helpen hiermee?
2) Kijk in je database (want die heb je wel?) of er een bestand gekoppeld is aan deze track (via Artist-Track oid).
3) Zo ja: filmpje. Zo nee: webcam.
Voor ons is het handig als je met iets meer komt:
a) hoe ziet de XML eruit?
b) hoe ziet je database eruit?
c) hoe zijn de filmpjes opgeslagen? Weet je een adres of zijn echt losse bestandjes in een map?
Eddy E op 18/01/2015 20:24:42:
1) Kijk wat de huidige track is (dus lees de XML in)
2) Kijk in je database (want die heb je wel?) of er een bestand gekoppeld is aan deze track (via Artist-Track oid).
3) Zo ja: filmpje. Zo nee: webcam.
Voor ons is het handig als je met iets meer komt:
a) hoe ziet de XML eruit?
b) hoe ziet je database eruit?
c) hoe zijn de filmpjes opgeslagen? Weet je een adres of zijn echt losse bestandjes in een map?
2) Kijk in je database (want die heb je wel?) of er een bestand gekoppeld is aan deze track (via Artist-Track oid).
3) Zo ja: filmpje. Zo nee: webcam.
Voor ons is het handig als je met iets meer komt:
a) hoe ziet de XML eruit?
b) hoe ziet je database eruit?
c) hoe zijn de filmpjes opgeslagen? Weet je een adres of zijn echt losse bestandjes in een map?
Thanks voor je snelle reactie Eddy!
a) De XML ziet er als volgt uit:
Quote:
nowplaying>
<song>
<!-- Current -->
<artist>Elvis vs. JXL</artist>
<title>A Little Less Conversation (JXL Radio Edit Remix)</title>
<timeplayed>20:31:45</timeplayed>
<album/>
<image/>
<purchase/>
</song>
<song>
<!-- Next -->
<artist>Aloe Blacc</artist>
<title>The Man</title>
<timeplayed/>
<album/>
<image/>
<purchase/>
</song>
</nowplaying>
<song>
<!-- Current -->
<artist>Elvis vs. JXL</artist>
<title>A Little Less Conversation (JXL Radio Edit Remix)</title>
<timeplayed>20:31:45</timeplayed>
<album/>
<image/>
<purchase/>
</song>
<song>
<!-- Next -->
<artist>Aloe Blacc</artist>
<title>The Man</title>
<timeplayed/>
<album/>
<image/>
<purchase/>
</song>
</nowplaying>
b) Er is geen database betreft aantal en welke videoclips.
c) Filmpjes zijn .mp4 bestanden, opgeslagen op de webserver in een map. Script zou ze dus daar uit moeten gaan kiezen. Of is een mySQL database met de actuele aanbod handiger? Dan zou een database bestaan uit Artiest, Titel, DirLocation bijv.