Geek Answers Handbook

Livestream Video.js only shows with auto play set to true. Can I make it work after clicking the play button?

I use the Video.js player to broadcast live content from my local webcam (but, I think, it does not matter in this case, it can be any live stream from the Internet). I wrote a very simple code:

<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>

And now in this configuration I see the contents of the stream, but there are a couple of errors:

1) I do not see the controls (to pause the stream)

2) The stream looks like this , so the video does not change to the full size of the component. BUT (and this is really interesting), when I resize elements on a web page (for example, in Chrome, holding control and scrolling the mouse wheel) to 110%, then the video fills the entire component. It seems that the error in video.js or maybe my implementation is wrong?

3) when I remove the autoplay="true" parameter - nothing is displayed, the controls and video disappeared, and it is impossible to play it.

4) I wanted to remove autoplay="true" , but adding information about the poster, turning on poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg" - nothing has changed, the stream is not displayed, the controls are missing there.

5) when I remove the data-setup parameter and leave it like this: <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" > then the controls and poster are visible (this is great! ), but the play button is grayed out and it is not possible to play my stream.

I want to achieve the effect that after loading the web page I can see the image of the poster with the play button, and when I click on it - I will see a properly adjusted stream. What am I missing? Thanks!

+5
source share
2 answers

Try without controls

This works for 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>
+1
source

First of all, try using the latest version of video.js, you are using version 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>

Secondly, if you are trying to use live (stream) with videojs, you should see how videojs read stream sources: https://github.com/videojs/video.js/blob/master/docs/guides/tech.md # enabling-streaming-playback

Note that streaming URLs must have a specific pattern:

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

FLV is a video container, not a protocol, you should use a stream protocol such as RTMP (Flash), HDS (Flash), Mpeg / Dash or HLS (Apple).

Hi,

0
source

More articles:


All Articles