ran*_*er1 5 javascript css video jquery video.js
我正在使用Video.js播放器从我的本地网络摄像头流式传输实时内容(但我认为在这种情况下无关紧要,它可能是来自网络的任何直播流).我写了一个非常简单的代码:
<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>
现在在该配置中我看到了流内容,但是有几个错误:
1)我没有看到控件(暂停流)
2)Stream看起来像这样,因此视频不会调整为组件的完整大小.但是,当我调整网页上的元素大小(例如,通过控制和滚动鼠标滚轮在Chrome中)到110%,然后视频填充整个组件时,这非常有趣.看起来像video.js中的错误或者我的实现可能是错误的？
3)当我删除参数时autoplay="true"- 没有任何显示,控件和视频消失,无法播放.
4)我想删除autoplay="true",但添加海报信息包括poster="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/NYC_Times_Square_wide_angle.jpg/640px-NYC_Times_Square_wide_angle.jpg"- 没有任何改变,流不可见,控件不在那里.
5)当我删除data-setup参数并保持这样:
<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" >然后控件和海报是可见的(这很棒!),但播放按钮是灰色的,不可能播放我的流.
我希望达到这样的效果:在加载网页后,我可以看到带有播放按钮的海报图像,当我点击它时 - 我将看到正确调整大小的流.我错过了什么？谢谢!
首先，尝试使用最新版本的video.js，您使用的是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>
其次，如果您尝试使用 videojs 进行直播（流），您应该了解 videojs 如何读取流源： https: //github.com/videojs/video.js/blob/master/docs/guides/tech。 md#启用流媒体播放
请注意，流媒体 url 需要具有特定的模式：
{protocol}://{your.streaming.provider.net/cfx/st}/{format}:{videoURL}.{format}
FLV 是一个视频容器，而不是一个协议，您应该使用 RTMP(Flash)、HDS(Flash)、Mpeg/Dash 或 HLS(Apple) 等流协议。
问候，