2016-04-13 9 views
0

Ich baue eine Website, die ein Live-Streaming-Video zeigt. Ich möchte einen einzigen Button erstellen, um diesen Live-Stream im Vollbildmodus darzustellen.rtsp streaming vlc in HTML-Seite; Vollbild-Funktion

Das sind meine Code:

<title>VLC Mozilla plugin test page</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<body> 
    <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"> 
     <!--param name="autostart" value="true" /> 
     <param name="allowfullscreen" value="false" /--> 
     <embed type="application/x-vlc-plugin" 
     name="video2"    
     pluginspage="http://www.videolan.org" 
     version="VideoLAN.VLCPlugin.2" 
     autoplay="yes" fullscreen="false" volume="false" 
     width="720"height="480" id="vlc" events="True" src="rtsp://100.100.100/video.something"/></embed> 

    </object> 
     <button> 
     fullscreen 
     </button> 
    <script> 
     $(document).ready(function() { 
      $("button").on('click', function(){ 
      var video = $('object').find('embed'); 
       console.log("founded"); 
       video.fullscreen = true; 
       if(video.fullscreen === true){ 
        console.log('fullscreen now'); 
       } else 
        console.log('fullscreen not now'); 


      }); 
     }); 
    </script> 

</body> 

es kann nicht richtig funktionieren. Ich bin so dankbar für jeden einzelnen Ratschlag :)

+0

Bitte erläutern Sie, welchen Fehler Sie bekommen oder welches Problem Sie haben. – ehh

+0

ReferenceError: Video ist nicht definiert; Ich habe das auf der Konsole. Es wird kein Vollbildmodus für das Live-Streaming angezeigt. –

+0

Erklären Sie auch, was Sie versucht haben und warum das nicht funktioniert hat, aber wie es Sie vielleicht näher an eine funktionierende Lösung gebracht hat. – Rovanion

Antwort

0

gelöste Jungs! Es ist nicht der beste Weg, aber es funktioniert! Ich habe den Fullscreen = 'true' auf der Embed gelöscht; Setzen Sie eine ID für sie und meine ein neues Javascript.

hier ist die neue:

<title>VLC Mozilla plugin test page</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<body> 
    <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"> 
     <!--param name="autostart" value="true" /> 
     <param name="allowfullscreen" value="false" /--> 
     <embed type="application/x-vlc-plugin" 
     id="vlc" 

     pluginspage="http://www.videolan.org" 
     version="VideoLAN.VLCPlugin.2" 
     width="720"height="480" id="vlc" events="True" src="rtsp://host/video.something"/></embed> 

    </object> 
     <button id="fullscreen"> 
     fullscreen 
     </button> 
    <script type="text/javascript"> 
     $("#fullscreen").click(function() { 
      var a = document.getElementById('vlc').video.toggleFullscreen(); 
     }); 
    </script> 

</body> 

aber das Problem ist, es zeigt immer noch eine Schaltfläche Vollbild auf der vlc-Plugin. Ich muss nur noch herausfinden, wie ich die Vollbild-Taste am vlc-plugin deaktivieren und meinen eigenen Button für diesen Vollbildmodus erstellen kann.