Video.js con live streaming mostra solo con la riproduzione automatica impostata su true. Posso farlo funzionare dopo aver fatto clic sul pulsante di riproduzione?

Sto utilizzando il lettore Video.js per trasmettere in streaming i contenuti dal vivo dalla mia webcam locale (ma suppongo che in questo caso non dovrebbe importare, potrebbe trattarsi di un live streaming dal web). Ho scritto un codice molto semplice:Video.js con live streaming mostra solo con la riproduzione automatica impostata su true. Posso farlo funzionare dopo aver fatto clic sul pulsante di riproduzione?

<head> 
    <link href="video-js.css" rel="stylesheet"> 
    <script src="http://www.andy-howard.com/js/libs/jquery-1.8.2.min.js"></script> 
    <script src="http://vjs.zencdn.net/c/video.js"></script> 
     <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> 
    </style> 
</head> 
<body> 
    <video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls" 
     preload="auto" data-setup='{}' autoplay="true" > 
     <source src="http://10.172.180.31:8090/live.flv" type="video/x-flv"> 
    </video> 
</body>

E ora in quella configurazione vedo lo streaming di contenuti, ma ci sono errori di coppia:

1) Non vedo i controlli (per interrompere il flusso)

2) Il flusso si presenta come this, quindi il video non viene ridimensionato a tutta la dimensione del componente. MA (e questo è davvero interessante) quando ridimensiono gli elementi sulla pagina web (ad esempio in Chrome tenendo premuto il controllo e scorrendo la rotellina del mouse) al 110%, il video riempie l'intero componente. Sembra un bug in video.js o forse la mia implementazione è sbagliata?

3) quando rimuovo il parametro autoplay="true" - non viene visualizzato nulla, i controlli e il video sono scomparsi ed è impossibile riprodurli.

4) Volevo rimuovere lo autoplay="true", ma aggiungendo le informazioni del poster includendo poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" - non è stato modificato nulla, lo stream non è visibile, i controlli non sono presenti.

5) quando rimuovo il parametro data-setup e lasciare in questo modo: <video id="video1" class="video-js vjs-default-skin" width="640" height="480" controls="controls" preload="auto" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" > poi i controlli e il poster sono visibili (che è grande), ma il pulsante di riproduzione è grigio ed è impossibile giocare il mio flusso!.

Voglio ottenere l'effetto che dopo aver caricato la pagina Web posso vedere l'immagine del poster con il pulsante di riproduzione, e quando lo clicco, vedrò il flusso correttamente ridimensionato. Cosa mi manca? Grazie!

fonte

2015-05-17 randomuser1

Prima di tutto, cercare di utilizzare il lastest rilascio di Video.js, si utilizza la versione 3.2 ...

<link href="http://vjs.zencdn.net/4.12.6/video-js.css" rel="stylesheet"> 
<script src="http://vjs.zencdn.net/4.12.6/video.js"></script>

In secondo luogo, se si sta tentando di utilizzare un live (stream) con videojs, si dovrebbe vedere come videojs legge le fonti di flusso: https://github.com/videojs/video.js/blob/master/docs/guides/tech.md#enabling-streaming-playback

Nota che gli URL in streaming bisogno di un modello specifico:

{protocol}://{your.streaming.provider.net/cfx/st}/{format}:{videoURL}.{format}

FLV è un contenitore video, non un protocollo, y Dovresti usare un protocollo di streaming come RTMP (Flash), HDS (Flash), Mpeg/Dash o HLS (Apple).

saluti,

fonte

2015-05-19 11:27:37

provare senza la controls

questo funziona per me:

<video id="se_videojs" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="auto" width="auto" data-setup="{}"> 
<source src="http://server/playlist.m3u8" type="application/x-mpegurl"> 
</video>

fonte

2015-06-22 19:16:45

Video.js con live streaming mostra solo con la riproduzione automatica impostata su true. Posso farlo funzionare dopo aver fatto clic sul pulsante di riproduzione?

risposta

Problemi correlati