Hallo Zusammen,
ich habe bisher die ganze Zeit meinen Stream der Kamera über ein Iframe auf meiner Seite eingebunden. Da ich nicht so der Fan von Iframes bin wollte ich diese nun in die content Seite mit einbinden.
Als Layout benutze ich das "Mobile Slideout Navigation" Template.
Die videojs source Scripte habe ich im <head> Teil der index.html eingefügt. Diese werden auch ordnungsgemäß geladen. Zuvor hatte ich das auch auf der content seite versucht, jedoch ohne erfolg.
Mein Problem liegt nun darin, dass videojs über <script> var player = videojs('stream2');</script> aufgerufen wird. Diese Zeile aber ignoriert wird.
Hier mein Auszug aus der content_cam.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="page" id="content5">
<div class="gridster">
<ul>
<div class="fluidMedia" style="max-width:940px;">
<video id="stream1" width=940 height=540 class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls data-setup="{}">
<source src="/fhem/www/media/hls/ipcam1/index.m3u8" type="application/x-mpegURL">
</video>
<script>var player = videojs("stream1");</script>
</div>
Beim Developer Tool von Chrome wird mir diese Stelle nicht angezeigt von dem DIV container.
<div class="fluidMedia" style="max-width:940px;">
<video id="stream1" width="940" height="540" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls="" data-setup="{}">
<source src="/fhem/www/media/hls/ipcam1/index.m3u8" type="application/x-mpegURL">
</video>
</div>
Ich weiß nicht ob ich gerade vor lauter Bäumen den Wald nicht sehe aber ich versuche schon seit Stunden das irgendwie hinzubekommen :-(
Vielleicht habt ihr ja ein paar Tipps die ich noch probieren kann oder idealeweise wisst wieso es nicht funktioniert.
Vielen Dank schon mal.
Grüße Wiesel
Pagebutton und Link benutzen zum Laden der Unterseiten die .load() Function. Die Art der Nutzung mit zusätzlichem Selector verwirft jegliche Scripts im geladenen HTML (siehe API Docu jQuery .load(), Abschnitt "Script Ececution")
Mögliche Lösungsansätze:
- eigenes Widget bauen, was im init() den Player startet
- einen Eventlistener auf die Hauptseite setzen, der den Player startet, nachdem alle Widgets initialisiert wurden und der Player vorhanden ist
$(document).on("initWidgetsDone", function (e, area) {
if ( $( "#stream2" ).length ) {
var player = videojs('stream2');
}
});
Hallo setstate,
auch wenn es nicht die Antwort war die hören wollte ;D vielen Dank.
Muss ich dann mal schauen wie ich Zeit und Lust habe meine Webseite auf "Pagetab" abzuändern. Vorerst werde ich aber wieder auf die Iframe Lösung zurückgreifen.
Grüße Wiesel