Menu
I'm using the Video.js player to stream live content from my local webcam (but I guess that should not matter in that case, it could be any live stream from web). I wrote a really 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 that configuration I see the stream content, but there are couple errors:
1) I don't see the controls (to pause the stream)
2) Stream looks like this, so the video is not resized to the full size of the component. BUT (and that's really interesting) when I resize the elements on the webpage (e.g. in Chrome by holding control and scrolling the mouse wheel) to 110%, then the video fills the whole component. Seems like a bug in video.js or maybe my implementation is wrong?
3) when I remove the parameter autoplay="true" - nothing shows up, controls and video is gone and it's impossible to play it.
4) I wanted to remove the autoplay="true", but adding the poster info by including 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 visible, the controls are not 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 (which is great!), but the play button is greyed out and it's impossible to play my stream.
I want to achieve the effect that after loading the webpage I can see the poster image with play button, and when I click it - I will see the properly resized stream. What am I missing? Thanks!
648
Try it without the 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
