HTML VLC z listy kanałów

anonim · Post by **anonim** » 2014-07-06, 19:09

[center]
HTML VLC z listy kanałów (M3U8, MMS, MMSH, RTSP, UDP, HTTP)

Kody na stronie:

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>test</title>
   </head>
<body>

   <div align="center"><SCRIPT type=text/javascript>
      <!--
      var ar = '16:9';
      var options=new Array(
      ':http-caching=3000',
      ':http-reconnect',
      'aspect-ratio='+ar
      );
 
      function init() { 
      myvlc = new VLCObject("vlc", "640", "360");
      myvlc.write("player");
      play();
      }
      function play()
      {
      var vlc = document.getElementById("vlc");
      var f = document.getElementById('ch');
      var ch=f.options[f.selectedIndex].value;
      if(ch=='-1')
      {
      vlc.playlist.stop(); if(confirm("TV")) window.open("/login");
      }
      else
      {
      //vlc.playlist.stop();
      //vlc.playlist.items.clear();
      var id = vlc.playlist.add(ch, null, options );
      vlc.playlist.playItem(id)
      //vlc.playlist.play();
      }
      //document.getElementById('player').innerHTML = '<object width="640" height="360" id="vlc"><param name="ShowDisplay" value="true"><param name="MRL" value="'+ch+'"><param name="AutoLoop" value="true"><param name="AutoPlay" value="true"><param name="Volume" value="50"><param name="toolbar" value="true"><embed type="application/x-vlc-plugin" version="VideoLAN.VLCPlugin.2" width="600" height="450" name="vlc" target="'+ch+'" autoplay="true" loop="yes" volume="50" toolbar="true" text="..."></object><br>';
      }
      function ch_asratio(as)
      {
      ar = as; vlc.video.aspectRatio = as;
      }
      //-->
      </SCRIPT>

      <div id="player"><embed id="vlc" height="360" name="vlc" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="640" version="VideoLAN.VLCPlugin.2"></div>

         <div align="center">
         <select id="ch" onchange="play()" size="1"> 
         <option selected="">Stream0</option>
         <option value="http://xxx">Stream1</option>
         <option value="http://xxx">Stream2</option>
         <option value="mmsh://xxx">Stream3</option>
         <option value="http://xxx">Stream4</option>
         <option value="mms://xxx">Stream5</option>
         </select>
         </div>
      </div>
   </div>

   </body>
</html>

Code: Select all

<option value="http://xxx">Stream1</option>

To Stream1 = nazwa kanał np. (TVP 1, Polsat)
[/center]

anonim · Post by **anonim** » 2015-01-05, 15:12

Witam.
Co musiałbym zmienić w kodzie,jeżeli chciałbym do listy załadować filmiki w mp4 lub flv - ale chciałbym aby same odtwarzały się jeden po drugim?

[ Dodano: 2015-01-05, 15:12 ]
Panowie,pomożecie? :-(

anonim · Post by **anonim** » 2015-01-05, 18:16

Tak pomożemy ;-)

Podaje najprostszy przykład:

1) Tworzymy playlistę kanałów lista.m3u8

Code: Select all

#EXTM3U
#EXTINF:1,PLIK NR 1
01.flv
#EXTINF:2,PLIK NR 2
02.flv
#EXTINF:3,PLIK NR 3
03.flv

gdzie 01.flv to ścieżka do pliku lub jego nazwa jak w tym przypadku, plik znajduje się w tym samym katalogu co playlista ale równie dobrze może to być szczegółowa ścieżka np. http://twojserwer.pl/pliki-flv/01.flv, format w sumie nie ma większego znaczenia może to być także 01.mp4.

2) Wklejamy kod embed na stronę www

Code: Select all

<embed type="application/x-vlc-plugin" name="VLC" autoplay="yes" loop="yes" volume="100" allowfullscreen="true" hidden="no" width="640" height="480" target="lista.m3u8">

W załączeniu przesyłam przykład ;-)

Pozdrawiam
Jarek

anonim · Post by **anonim** » 2015-01-05, 18:57

Dziękuje za praktyczną porade i jednocześnie prosze o następną. :->

Świetny sposób w przypadku kilku plików,ale chcąc umieścić obszerniejszą ich liczbę pojawi się problem ogladania ciągle od pierwszego np; odcinka.
Kod z pierwszego postu jest o tyle wygodny,że mamy możliwość wybrania odcinka (pliku) od którego chcemy rozpocząć ogladanie,jest tylko problem że następne video musimy uruchamiać ręcznie - nie startują same. Znasz (znacie) sposób aby zaczęły?

Pozdrawiam

anonim · Post by **anonim** » 2015-01-05, 20:38

To teraz edycja mojego poprzedniego przykładu a mianowicie rozbudowa o buttony i javascript - zgodnie z dokumentacją umieszczoną na stronie:

Code: Select all

https://wiki.videolan.org/Documentation:WebPlugin

Wystarczy zmienić zawartość pliku index.html na:

Code: Select all

<html>
   <body>
   
      <embed type="application/x-vlc-plugin" enablejavascript="true" id="vlc" name="vlc" autoplay="yes" loop="yes" volume="100" allowfullscreen="true" hidden="no" width="640" height="480" target="01.flv">
      
      <br>
      
      <button onclick='vlc.playlist.playItem(0);'>Odcinek 1</button>
      <button onclick='vlc.playlist.playItem(1);'>Odcinek 2</button>
      <button onclick='vlc.playlist.playItem(2);'>Odcinek 3</button>
      
      <script type="text/javascript">
         var vlc = document.getElementById("vlc");
         vlc.playlist.add("02.flv");
         vlc.playlist.add("03.flv");
      </script>
      
    <body>
</html>

Cały drugi przykład przesyłam w załączeniu.

Pozdrawiam
Jarek

anonim · Post by **anonim** » 2015-01-05, 23:28

Wielkie dzięki!
Działa wspaniale. Jeżeli mógłbym nadwyrężyć Twoją cierpliwość ( :->

) ,chciałbym jeszcze zadać 2 pytania (prośby):
- Czy można zapisać w kodzie aby odtwarzacz buforował?
- Czy można by było schować te "butony" w rozwijaną listę?

anonim · Post by **anonim** » 2015-01-06, 12:26

W takim wypadku, podaje 3 rozwiązanie w załączeniu.

Wystarczy edycja pliku index.html z poprzedniego przykładu:

Code: Select all

<html>
   <head>
      <meta charset="UTF-8">
   <head>
   <body>
   
      <embed type="application/x-vlc-plugin" enablejavascript="true" id="vlc" name="vlc" autoplay="yes" loop="yes" volume="100" allowfullscreen="true" hidden="no" width="640" height="480" target="01.flv">
      
      <br><br>
      Przykład przycisków zmieniających numer odtwarzanej pozycji playlisty
      <br><br>
      
      <button onclick='vlc.playlist.playItem(0);'>Odcinek 1</button>
      <button onclick='vlc.playlist.playItem(1);'>Odcinek 2</button>
      <button onclick='vlc.playlist.playItem(2);'>Odcinek 3</button>
      
      <br><br>
      Przykład rozwijanej listy zmieniającej numer odtwarzanej pozycji playlisty
      <br><br>
      
      <form>
         Wybierz:
         <select id="select" name="select" size=1 onChange='var id = document.getElementById("select").value; vlc.playlist.playItem(parseInt(id));'>
            <option value="0">Odcinek 1</option>
            <option value="1">Odcinek 2</option>
            <option value="2">Odcinek 3</option>
         </select>
      </form>   
      
      <script type="text/javascript">
         var vlc = document.getElementById("vlc");
         vlc.playlist.add("02.flv");
         vlc.playlist.add("03.flv");
      </script>
   
    <body>
</html>

Oczywiście znając podstawy js w dowolny sposób można modyfikować działanie odtwarzacza. Proszę ponownie o zapoznanie się ze stroną

Code: Select all

https://wiki.videolan.org/Documentation:WebPlugin

oraz jakimś kursem js.

anonim · Post by **anonim** » 2015-01-06, 21:43

Wszystko działa jak należy,sam bym sobie nie poradził.
Bardzo dziekuje za udzielenie praktycznych porad z przykładami oraz za poświęcony czas i cierpliwość . :->

[ Dodano: 2015-01-06, 21:43 ]
Jeśli można,chciałbym się zapytać jak zapisać w skrypcie który podałeś możliwość buforowania przez ten player?
Szukałem po różnych forach znalazłem tylko coś takiego,ale to nie działa...:

Code: Select all

<script type="text/javascript"> 
var vlc = document.getElementById("vlc");
var options = new Array(':http-caching=3000');

Szukałem również na stronie,którą mi podałeś,ale z moimi miernymi umiejętnościami nie mogłem tam nic znaleść. :-(

anonim · Post by **anonim** » 2015-01-06, 22:06

Jeżeli chcemy użyć jednej opcji nie potrzebujemy tworzyć tablicy wystarczy

Code: Select all

...
var vlc = document.getElementById("vlc");
vlc.playlist.add("02.flv", "nazwa2", "novideo");
vlc.playlist.add("03.flv", "nazwa2", "");
...

gdzie novideo to opcja odtwarzania materiału bez obrazu, zasadniczo :http-caching=3000 też powinno działać, ale jak jest sprawdź już sam, testuj różne sposoby wpisania opcji w tej chwili nie mam jak przetestować.

Pozdrawiam
Jarek

anonim · Post by **anonim** » 2015-01-06, 23:51

Rozumiem,że miałem podstawić w ten sposób:

Code: Select all

vlc.playlist.add("02.flv", ":http-caching=3000");

Próbowałem również:

Code: Select all

vlc.playlist.add("02.flv", "http-caching=3000");

Gdy podstawiam "novideo" - to faktycznie działa,obraz znika,ale z buforem to nie wychodzi.

Na jakiś ruskich forach widziałem,że wstawiali też tą opcje do playera:

Code: Select all

<embed type="application/x-vlc-plugin" http-caching="3000" enablejavascript="true" id="vlc" name="vlc" autoplay="yes" loop="no" volume="100" allowfullscreen="true" hidden="no" width="640" height="400" target="http://xxxx.flv">

lub

Code: Select all

<script type="text/javascript"> 
var vlc = document.getElementById("vlc"); 
var options = new Array(':http-caching=3000');

Po wypróbowaniu tych wszystkich opcji stwierdzam,że żadna z nich nie zmusza playera do buforowania... :-(

anonim · Post by **anonim** » 2015-01-07, 19:35

Co do video, do którego otrzymałem link na pw faktycznie nie działa opcja :http-caching=3000 - natomiast działa:

Code: Select all

vlc.playlist.add("http://xxx.xxx.xxx/storage/3d5b2b72e7/R7Z6lJbIki.flv", "nazwa2", ":network-caching=50000");

Z dokładnym linkiem:

Code: Select all

http://wklej.org/hash/d3a3be6d48d/txt/

Pozdrawiam
Jarek

anonim · Post by **anonim** » 2015-01-07, 19:56

W Twoim zapisie działa!
Popełniłem kilka błędów; nie wiedziałem,że aż tak dużą liczbę trzeba wpisać i chyba zjadłem przecinek...
Jarek,ogromne dzięki!

stream-recorder.pl

Zanonimizowana wersja forum tylko do odczytu

HTML VLC z listy kanałów

HTML VLC z listy kanałów